示例:http: //jsfiddle.net/YUhgb/
HTML
<html>
<body>
<div class="left"></div>
<div class="right">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<p>
After Container
</p>
</div>
</body>
</html>
CSS
.left{
float: left;
width: 150px;
height: 700px;
background-color:red;
}
.right{
margin-left: 160px;
background-color:blue;
}
.container:after{
content: "";
height: 0;
clear: both;
display: block;
}
.item{
float:left;
width: 21%;
margin-right: 1%;
margin-bottom: 10px;
height: 200px;
background-color:green;
}
问题是,如果左栏太长,浮动内容下方的内容会下降到左侧下方。在我的示例中,我希望文本After Container
直接显示在绿色框下方。
如何应用 clear:left 使其仅影响右列?