在父级div中让div左右浮动

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>

但是当我应用以上代码时，它并不符合我的要求。请帮忙。

- user2024006

---

你的CSS中float属性在哪里？ - Mr. Alien

你的 CSS 中没有浮点数？那你想要什么？ - Kees Sonnema

浮动属性在哪里，以及 #wrapper-navbar 的 css 在哪里？ - rickard

代码重新编辑，请帮忙。 - user2024006

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，就可以达到效果。 点击此处查看实时示例。

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

- soyuka

---

你需要进行编程才能得到一个不错的结果。 - soyuka

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;   
}   

- Kenneth

---

但是当我使用float时，它并不属于头元素。 - user2024006

你在哪里应用了float属性？ - Kees Sonnema

它不应该出现在标题元素下面，它们是在标题元素内部的。 - Kenneth

@ Kenneth，请参考Soyuka的实时演示中的第一个，尝试不使用clearfix，您将明白我想告诉您的内容。 - user2024006

如果不想使用clearfix，则必须为标题部分设置固定高度-请查看此链接http://jsfiddle.net/59PvL/6/。 - matthewb

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/

- Bartek Bielawa

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 样式

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

#wrapper-navbar{
    float:right;
}

- The Mechanic