Question

我想让两个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>

但是当我应用上面的代码时，它并不是我想要的。请帮忙

Answer 1

假设你想要：

<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，就可以了。 See here for a live example

Second example宽度合适。

Answer 2

您尚未添加浮动属性：

#wrapper-logo {

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

#wrapper-navbar{
    float: right; 
    width: 250px;   
}

Answer 3

您在以后的所有项目中都有很好的解决方案。当我开始项目时，我创建了一个类名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/

Answer 4

你可以使用这个让你的孩子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 for this

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

#wrapper-navbar{
    float:right;
}

使div在父div中左右浮动

4 个答案: