css能不能实现左边div固定宽度，右边div自适应撑满剩下的宽度

如题所述

两列布局：左边固定宽度，右边自适应宽度
这样的布局，其实不是难点，我想很多同学都有实现过，示例：

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
CSS Code

<style type="text/css">
*{
margin: 0;
padding: 0;
}

#left {
float: left;
width: 220px;
background-color: green;
}

#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>
上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f2f247qpvqf78p82ppq.html