一、左侧定宽,右侧自适应
1. 使用float和margin实现
html
<div class="left">左侧定宽</div><div class="right">右侧自适应</div>
css
?.left{ ???background-color: red; ???float: left; ???width: 300px; ???height:300px; ?} ?.right{ ???background-color: green; ???margin-left: 300px; ???height:300px; ?}
效果图
2. 使用float+margin(fix)实现
html
<div class="left">左侧定宽</div><div class="right-parent"> ?<div class="right"> ???利用float+margin(fix)实现 ?</div></div>
css
?.left{ ???background-color: red; ???float: left; ???width: 100px; ???height:300px; ?} ?.right-parent{ ???float: right; ???margin-left: -100px; ???width: 100%; ?} ?.right{ ???background-color: green; ???margin-left:100px; ???height:300px; ?}
css多列布局
原文地址:http://www.cnblogs.com/Anita-meng/p/7794464.html