3

我想让两个 div 在居中的父 div 中左右浮动。

css

body {
margin : 0px;
padding : 0px;
}

#wrapper {
width : 100%;
height : 100%;
border : 1px solid red;

}

#wrapper-header {
width : 1000px;
height : 100%;
border : 1px solid red;
margin : 0px auto;
}   

#wrapper-logo {
width : 250px;
height : 100px;
float : left;
border : 1px solid black;

}

#wrapper-navbar {
width : 250px;
height : 100px;
float : right;
border : 1px solid black;
}

和 html

<div id="wrapper">
<div id="wrapper-header">
    <div id="wrapper-logo">
    </div>
    <div id="wrapper-navbar">
    </div>
</div>
</div>
</body>

但是当我应用上面的代码时，它并没有如我所愿。请帮忙

4

4 回答 4

5

假设你想要：

<div id="wrapper">
    <div id="wrapper-header" class="cf"> 
        <div id="wrapper-logo">
            Left
        </div>
        <div id="wrapper-navbar">
            Right
        </div>
    </div>
</div>

CSS将是：

#wrapper-logo {
    float:left;
}

#wrapper-navbar {
    float:right;
}

加上一点clearfix，它就可以解决问题。请参阅此处以获取实时示例。

第二个具有适当宽度的示例。

于 2013-04-26T07:01:44.417 回答
0

您还没有添加浮动属性：

#wrapper-logo {

    width : 250px;
    height : 90px;
    margin : 10px 0px 10px 10px ;
    border: 1px solid black;
    float: left;    
}

#wrapper-navbar{
    float: right; 
    width: 250px;   
}
于 2013-04-26T06:58:46.673 回答
0

嗨，在您未来的所有项目中，您都有很好的解决方案。当我开始项目时，我创建了一个clearfix清除所有浮动和其他想法的类名。我每次都在有浮动子元素的父元素上使用这个类。

HTML

<div id="wrapper">
<div id="wrapper-header" class="clearfix">
    <div id="wrapper-logo">
    </div>
    <div id="wrapper-navbar">
    </div>
</div>
</div>

CSS

body {
margin : 0px;
padding : 0px;
}
// NEW CLASS //
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#wrapper {
width : 100%;
height : 100%;
border : 1px solid red;

}

#wrapper-header {
width : 1000px;
height : 100%;
border : 1px solid red;
margin : 0px auto;
}   

#wrapper-logo {
width : 250px;
height : 100px;
float : left;
border : 1px solid black;

}

#wrapper-navbar {
width : 250px;
height : 100px;
float : right;
border : 1px solid black;
}

演示

http://jsfiddle.net/WKnbj/
于 2013-04-26T07:09:51.203 回答
0

您可以使用它使您的子 div 左右浮动，并且它是身体中心的父级

<div id="wrapper">
    <div id="wrapper-header" class="cf"> 
        <div id="wrapper-logo">
            Left
        </div>
        <div id="wrapper-navbar">
            Right
        </div>
    </div>
</div>

为此的 css

wrapper-header{ 
    width:980px; 
    margin:0 auto; 
    overflow:hidden;
}    
#wrapper-logo{  
    float:left; 
}

#wrapper-navbar{
    float:right;
}
于 2013-04-26T07:10:51.163 回答