混合布局代碼：<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>三列布局必須使用左右絕對(duì)定位，中間自適應(yīng)，不能用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>
為什么css三列布局用浮動(dòng)模型會(huì)亂，但是在混合模型的div里嵌套三個(gè)div，用混合模型卻沒亂呢？
gothClaudia
2015-10-14 23:36:12
