不固定高度的浮动方案

by feng chen

HTML

<h4>
不固定高度的浮动方案
</h4>
<article class="layout float">
  <div class="left">左边部分</div>
  <div class="right">右边部分</div>
  <div class="middle">
    <p>中间部分 中间部分 中间部分 中间部分 中间部分 中间部分 中间部分</p>
    <p>中间部分 中间部分 中间部分 中间部分 中间部分 中间部分 中间部分</p>
    <p>中间部分 中间部分 中间部分 中间部分 中间部分 中间部分 中间部分</p>
    <p>中间部分 中间部分 中间部分 中间部分 中间部分 中间部分 中间部分</p>
  </div>
</article>

CSS

html *{margin:0;padding:0;}
.layout > div{min-height:100px;}
.left{background:lightblue; width:100px; float:left;}
.right{background:lightgreen; width:100px; float:right}
.middle{background:pink}