给定
HTML
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
和CSS@H_502_5@
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
(见：http://jsfiddle.net/ericjohannsen/JCPEH/1/)@H_502_5@
解决方法
你需要清除你的浮标.您可以通过clearfix类或清除元素来执行此操作.
CSS@H_502_5@
.clearfix:before,.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
HTML@H_502_5@
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
要么@H_502_5@
CSS@H_502_5@
.clear {
clear:both;
}
HTML@H_502_5@
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
更新小提琴：
http://jsfiddle.net/JCPEH/5/@H_502_5@
