左侧宽度固定，右侧宽度自适应的两栏布局与两侧宽度固定，中间宽度自适应的三栏布局一样，都是属于很基础很常见同时又十分重要的布局样式，因此值得好好总结一下都有哪些方法可以实现这样的布局。
假设要实现的左侧固定右侧自适应的两栏布局有如下要求：
- 左侧固定宽度为150px
- 右侧能充满容器且能随着容器宽度大小进行动态变化
- 允许两列中的任意一列成为最高列
- 给出兼容到IE8浏览器的方案
首先是基础的HTML代码和CSS样式：
/* HTML */
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
/* CSS */
#left {
width: 150px;
}
1. 双inline-block
#left,
#right {
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
#right {
width: calc(100% - 150px);
}
#container {
font-size: 0;
}
首先将left和right同时设置为display: inline-block，由于inline-block遵循流动布局，所以只需要设置好right的宽度，就可以使左右两列出现在同一行。这里使用了calc()函数，它可以自动地计算出right准确的宽度，非常方便。但是由于inline-block元素间由于空格或换行的存在会产生间隙，从而占据一小部分宽度。所以此时right还是会被“挤”到第二行。为了清除间隙，对container使用font-size: 0即可，但由于font-size是默认继承的，所以在left和right还需要对其进行重写覆盖，最后，使用vertical-align: top使两列顶端对齐。
参考示例：double_inline-block1.
该方法的缺陷：
- 在设置
right的宽度时，需要知道left的宽度 - inline-block需要清除间隙
- 需要使用
vertical-align: top进行顶端对齐 -
calc()只兼容到IE9
可兼容IE8方案：
#container{
min-width: 150px;
margin-left: 150px;
font-size: 0;
}
#left,
#right {
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
#left {
position: relative;
left: -150px;
}
#right {
width: 100%;
margin-left: -150px;
}
该方案主要利用了定位和负边距，首先在container中用margin-left为左列留出空间，然后对left使用相对定位，将其放置到预留的位置上；随后对right设置宽度width: 100%使其具有自适应性，到目前为止，页面的布局效果应该是这样的：
右列被挤到第二行
为了将右列放到第一行，对其使用margin-left: -150px即可；最后，由于整个布局是依据left原有位置（即上图中的标注区域）进行定位实现的，所以还要保证容器的最小宽度min-width为150px。
参考示例：double_inline-block2.
该方案的缺陷：
- 需要设置容器的最小宽度
更好的办法：
需要修改一下HTML代码：
/* HTML */
<div id="container">
<div id="left"></div>
<div id="box">
<div id="right"></div>
</div>
</div>
该方案为：
#container {
font-size: 0;
}
#left,
#box {
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
#box {
width: 100%;
margin-left: -150px;
}
#right {
margin-left: 150px;
}
这个方法的思路是通过在right外额外添加一层标签box，将box的宽度设置为width: 100%使其拥有自适应性；然后通过margin-left: -150px将其摆放到第一行：
将right定位到第一行
最后对right设置margin-left为left腾出空间。
参考示例：double_inline-block3.
该方法的缺点：
- 需要添加一个额外的
<div>标签
2. 双float
双float和双inline-block从本质上来说是一样的，所以两者实现原理基本一致，不同的地方在于float不需要清除元素间的间隙和顶部对齐，但取而代之的问题是需要清除浮动（闭合浮动）。
下面仅给出实现的方案和演示示例，不再过多重复实现原理：
方法一：
#container {
overflow: auto;
}
#left,
#right {
float: left;
}
#right {
width: calc(100% - 150px);
}
参考示例：double-float1.
方案缺点：
- 需要清除浮动
-
calc()只兼容到IE9
方法二（兼容IE8）：
/* HTML */
<div id="container" class="clearfix">
<div id="left"></div>
<div id="right"></div>
</div>
/* CSS */
#container {
min-width: 150px;
margin-left: 150px;
}
#left,
#right {
float: left;
}
#left {
position: relative;
left: -150px;
}
#right {
width: 100%;
margin-left: -150px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
参考示例：double-float2.
方案缺点：
- 不能使用
overflow清除浮动 - 需要设置容器最小宽度
方法三（兼容IE8）：
/* HTML */
<div id="container">
<div id="left"></div>
<div id="box">
<div id="right"></div>
</div>
</div>
/* CSS */
#container {
overflow: auto;
}
#left,
#box{
float: left;
}
#box {
width: 100%;
margin-left: -150px;
}
#right {
margin-left: 150px;
}
参考示例：double-float3.
方案缺点：
- 需要引入一个额外的
<div>标签
3. float+margin-left（兼容IE8）
#container {
overflow: auto;
}
#left {
float: left;
}
#right {
margin-left: 150px;
}
这个方案非常简单，只需要浮动left使其脱离正常流，随后right将占据left所在行达到两者在同一行的效果，同时对right使用margin-left为left留出空间，最后对container创建BFC闭合浮动。
参考示例：float+margin-left.
该方案的缺点：
- 需要清除浮动
- 在为
left留出空间时，需要参考left的宽度
4. float+BFC（兼容IE8）
#container {
overflow: auto;
}
#left {
float: left;
}
#right {
overflow: auto;
}
该方案在前一个方案的基础上只需对right创建BFC，而省去了为left留出空间的操作，原理是运用了BFC不与浮动元素重叠的特性，这种方法既简单，又无需知道左列具体的宽度值，非常有利于代码的组件化和复用性。
参考示例：float+BFC.
5. flex
#container {
display: flex;
align-items: flex-start;
}
#left {
flex: none;
}
#right {
flex: auto;
}
该方法使用了CSS3的新属性flex，简单且灵活。唯一需要注意的地方是，父容器在设置为display: flex后，各子元素在垂直方向上的对齐方式默认为align-items: stretch，即所有子元素的高度延伸到同一行中最高元素的高度，因此需要将其设置为align-items: flex-start来进行顶部对齐且高度适应于自身。
参考示例：flex.
需要注意的是，flex只兼容到IE11，如果想要兼容IE8-IE10，可参考“Old” Flexbox and “New” Flexbox.
6. grid
#container {
display: grid;
grid-template-columns: 150px 1fr;
align-items: start;
}
该方案同样使用了CSS3的新属性grid，代码量极少！但是grid本身其实是用于多列网格布局的，用在这里可以算是大材小用了：通过在父容器上设置display：grid和grid-template-columns: 150px 1fr定义出了每行两列的网格布局，第一列的宽度是150px，第二列的宽度是父容器剩余的所有可用宽度。布局定义完成后，会以父容器内的每个子元素为单位，依次按照从左到右，从上到下的顺序摆放到父容器定义出的各个网格中。
参考示例：grid.
同样地，grid在兼容性方面并不友好，只能兼容到IE10，且还需要添加供应商前缀-ms-.
网友评论