混合布局代码：<style>body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ text-align:center; line-height:50px}.top{ height:100px;background:#9CF}.head,.main{ width:960px; margin:0 auto;}.head{ height:100px; background:#F90}.left{ width:220px; height:600px; background:#ccc; float:left;}.right{ width:520px; height:600px;background:#FCC; float:right}.middle{width:200px; height:600px;background:yellow;float:left}.footer{ height:50px; background:#9F9;clear:both;}</style></head><body><div class="top"> <div class="head">head</div></div><div class="main"> <div class="left">left</div> <div class="right"></div> <div class="middle"></div></div><div class="footer">footer</div>三列布局必须使用左右绝对定位，中间自适应，不能用float模型：<style type="text/css">body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ line-height:50px}.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}.main{ height:600px; margin:0 310px 0 210px; background:#9CF}.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}</style></head><body> <div class="left">left</div> <div class="main"></div> <div class="right">right</div></body>
1 回答
已采纳
春与秋先生
TA贡献1条经验 获得超1个赞
关于这个问题，我建议你去看看本站的网页布局基础这一课程，里面讲解了三种布局方法，以及对在使用各种布局时容易出现的问题做了详细的解答！！http://www.imooc.com/learn/95
- 1 回答
- 0 关注
- 1462 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消