CSS三列布局两端固定宽度中间自适应

生活的激流已经涌现到万丈峭壁,只要再前进一步,就会变成壮丽的瀑布。没有播种,何来收获;没有辛苦,何来成功;没有磨难,何来荣耀;没有黯淡,何来辉煌。
两端固定宽度,中间自适应结构:
复制代码
代码如下:

<div class="wrap">
<div class="main">
<div class="content"></div>
</div>
<div class="submain">2</div>
<div class="sidebar">3</div>
</div>

复制代码
代码如下:

.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}

结果如下所示:

本文CSS三列布局两端固定宽度中间自适应到此结束。蝴蝶需要一次蜕变,才有可能换来惊艳。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css display table 自适应高度、宽度问题的如何解决

详解CSS多种三列自适应布局如何实现

CSS如何实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码

CSS如何实现宽度自适应宽高16:9的矩形的示例

CSS 如何实现高度自适应铺满整屏的如何实现