</div>
思路五: flex
CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{display: flex;}
.left,.rightright{width: 100px;}
.center{flex: 1; margin: 0 20px;}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
二、两列定宽一侧自适应布局
这种布局与单列定宽单列自适应布局非常相似
思路一: float
【1】float + margin
缺点是IE6-浏览器的3px的bug，以及当自适应列中有元素清除浮动时，会使该元素不与左侧浮动元素同行，从而出现文字下沉现象
CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{overflow: hidden;}
.left,.center{float: left;width: 100px;margin-right: 20px;}
.rightright{margin-left: 240px;}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
