Question

enter image description here

我是css的新手，这让我很难过。

如何让父div始终包含其子代？一旦我开始使用浮动进行对齐，父级就会停止包含子项。
我实际上不想漂浮东西。我想对齐它们。我们如何在CSS中进行对齐和边距，还没有对所有维度进行硬编码？
有人可以为此慷慨解囊吗？让我们假设为了这个例子，总宽度是960px，所有边距都是15px;

Answer 1

三种选择：

在绿色元素上设置clear: both。
在父容器上设置overflow: hidden。
在父容器上使用clearfix。

Answer 2

让我们看一个清晰灵活的版本：

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; }

即使您看到的width和height设置是不必要的，框也可以在省略时调整其内容，我只是为了演示目的而添加它们。

Answer 3

检查出来：http://jsfiddle.net/kMQbt/

Html：

<div id="parent">
 <div id="purple">
     purple
 </div>
 <div id="blue">
     blue
 </div>
 <div id="green">
     green
 </div>
</div>

的CSS：

#parent{
 width: 960px;
 background-color: grey;    
 float:none;
 padding-bottom: 15px;
}

#purple{
 width: 200px;
 height: 200px;
 float:left;   
 margin-top: 15px;
 margin-left: 15px;
 background-color: purple;
}
#green{
 width: 930px;
 height: 200px;
 background-color: green;  
 clear: both;
 margin-left: 15px;
}

#blue{
 width: 715px;
 float:left;
 height: 300px;
 margin: 15px;
 background-color: blue;
}

Answer 4

使用clearfix并将类分配给容器是解决问题的方法之一。

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

Answer 5

<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>

CSS

#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}

Answer 6

demo http://jsfiddle.net/yTUU6/

HTML

<div id="contaner">
    <div id="top_left">
        left box
    </div>
    <div id="top_right">
        right box<br />
        height will be changed <br />
        <br /><br /> <br /><br />         <br /><br /> <br /><br />       <br /><br /> <br /><br />
    </div>
    <div class="clear"></div>
    <div id="bottom"></div>
</div>

CSS

#contaner{
    width: 100%;
    height: 400px;
    background: #EEEEEE;
}
#top_left{
    width: 30%;
    border:solid 1px;
    height: 200px;    
    float:left;
}
#top_right{
    width:69%;
    float:left;
    border:solid 1px red;
}
.clear{
    clear: both;
}
#bottom{
    height: 100px;
    border: solid 1px green;
}

Answer 7

经典的方法（我是如何学会这样做的）使用更清晰的元素

CSS

.clearer{
    clear:both;
}
#parent{
    width:500px;
    background-color:#343434;
    padding:10px;
    color:#fff;
}

#box{
    width:50px;
    height:50px;
    margin:10px;
    float:left;
    background-color:#545454;
}

#variable{
    width:400px;
    float:left;
}

#footer{
    height:40px;
    margin-top:30px;
    background-color:#646464;
}

HTML

<div id="parent">
    <div id="box"></div>
    <div id="variable">
    </div>
    <div class="clearer"></div>
    <div id="footer"></div>
</div>

示例here

希望这有帮助

我该如何为此做css？

7 个答案: