利用浮动实现三列布局,中间宽度自适应
#box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ height: 500px; margin: 0 220px 0 140px; background-color:skyblue; } #right{ width: 200px; height: 600px; float: right; background-color: grey; } <div id="box"> <div id="left"></div> <div id="right"></div> <div id="main"></div> </div>
方法一:父级盒子添加一堵墙,用clear:both清除浮动
<div id="box"> <div id="left"></div> <div id="right"></div> <div id="main"></div> <div class="clear"></div> </div>
方法二:父级盒子添加overflow:hidden
时间: 2024-10-11 00:45:54