css布局两边固定中间自适应

来源：互联网发布：js保留三位小数编辑：程序博客网时间：2024/05/01 10:11

方法一 左右使用float 中间使用margin自适用

代码

<div style="width:100%;border:1px solid red">
<div style="width:100px; float:left; background:blue">左侧内容</div>
<div style="width:200px; float:right; background-color:yellow">右侧内容</div>
<div style="margin-left:100px;margin-right:200px; background-color:red;">中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;</div>
</div>

方法二 左右使用absolute 中间使用margin自适应

<div style="width:100%;border:1px solid red; position:absolute;">
<div style="width:100px; position:absolute; left:0px;background:blue">左侧内容</div>
<div style="width:200px; position:absolute;right:0px; background-color:yellow">右侧内容</div>
<div style="margin-left:100px;margin-right:200px; background-color:red;">中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;</div>
</div>

方法三使用 margin - (上层div width:100% 时,margin的负值达到-100%时，恰能达到上层div最左侧。)

<div style="border:1px solid red">
<div style="width:100%;float:left;">
<div style="height:300px;background:red;margin-left:200px;margin-right:200px;">中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;中间内容，自适应宽度;</div>
</div>
<div style="width:200px;height:300px;float:left;background:blue;margin-left:-100%">左侧内容</div>
<div style="width:200px;height:300px;background:yellow;float:left;margin-left:-200px">右侧内容</div>
<div style="border:none;clear:both"></div>
</div>
</div>

1 0