.parent{font-size: 0;}
.left,.rightright,.centerWrap{display:inline-block; vertical-align: top;font-size: 16px;}
.left,.rightright{width: 100px;position:relative;}
.centerWrap{width: 100%; margin: 0 -100px;}
.center{margin: 0 120px;}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="centerWrap" style="background-color: orange;">
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>
思路三: table
CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{display: table; width: 100%;table-layout: fixed;}
.left,.rightright,.centerWrap{display:table-cell;}
.left,.rightright{width: 100px;}
.center{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>
