CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{display: flex;}
.left,.center{width:100px;margin-right:20px;}
.rightright{flex:1;}
</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>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
三、中间定宽两侧自适应布局
思路一: float
CSS Code复制内容到剪贴板
<style>
p{margin: 0;}
.parent{overflow: hidden;}
.left{float: left;margin-right: 20px;}
.center{float: left;width: 100px;margin-right: 20px;}
.rightright{overflow: hidden;}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
</div>
