为了账号安全,请及时绑定邮箱和手机立即绑定

为什么css三列布局用浮动模型会乱,但是在混合模型的div里嵌套三个div,用混合模型却没乱呢?

为什么css三列布局用浮动模型会乱,但是在混合模型的div里嵌套三个div,用混合模型却没乱呢?

gothClaudia 2015-10-14 23:36:12
混合布局代码:<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 反对 回复 2015-10-15
  • 1 回答
  • 0 关注
  • 1457 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信