.top{width:800px;height:100px;margin:0 auto;background:gray;}
.main{width:800px;height:900px;background:red;margin:0 auto;}
.left{ width:200px;height:900px;background:blue;float:left;}
.right{width:590px;height:900px;background:green;float:right;}
.foot{width:800px;height:60px;margin:0 auto;}
.main{width:800px;height:900px;background:red;margin:0 auto;}
.left{ width:200px;height:900px;background:blue;float:left;}
.right{width:590px;height:900px;background:green;float:right;}
.foot{width:800px;height:60px;margin:0 auto;}
.top{ height:100px; background-color:grey;}
.main{ height:600px; background:red;}
.left{ height:600px; width:200px; background:blue; position:absolute;left:0px;}
.right{ height:600px; background:lightgreen; position:absolute;right:0;left:210px;}
.foot{ height:50px; background:orange;}
.main{ height:600px; background:red;}
.left{ height:600px; width:200px; background:blue; position:absolute;left:0px;}
.right{ height:600px; background:lightgreen; position:absolute;right:0;left:210px;}
.foot{ height:50px; background:orange;}
.top{height:60px;background:gray;}
.main{height:600px;background:red;position:relative;}
.left{height:600px;width:200px;top:0;left:0;background:blue;position:absolute;}
.right{height:600px;top:0;right:0;left:210px;background:green;position:absolute;}
.foot{height:50px;background-color:orange;}
.main{height:600px;background:red;position:relative;}
.left{height:600px;width:200px;top:0;left:0;background:blue;position:absolute;}
.right{height:600px;top:0;right:0;left:210px;background:green;position:absolute;}
.foot{height:50px;background-color:orange;}
完全可以使用float,但是需要把原题目中的
<div class="right">left</div>
<div class="left">right</div>
改成
<div class="left">left</div>
<div class="right">right</div>
即要注意容器顺序,因为float是跟随。
同时float不仅只使用两列布局,多列同样使用,关键是需要根据实际情况来选择最合适的方式。
<div class="right">left</div>
<div class="left">right</div>
改成
<div class="left">left</div>
<div class="right">right</div>
即要注意容器顺序,因为float是跟随。
同时float不仅只使用两列布局,多列同样使用,关键是需要根据实际情况来选择最合适的方式。