一、左列定宽与右侧自适应
使用的多，比如版块儿中的aside和main，做法也是比较多的。列举几种常见的方法以及我的看法。
1.利用float+margin的做法：
html:
<div class="wrap clearFix">
<div class="left">这是一个浮动元素</div>
<div class="right">这个元素并不需要浮动</div>
</div>
css:
.left{
float:left;
width:300px;
height:600px;
background: red;
}
.right{
margin-left: 300px;
height: 600px;
background: yellow;
}
两列布局-左侧定宽，右侧自适应1.png
left浮动之后脱离文档流，right自动排上去；right通过margin-left，值等于浮动元素的宽度，使其content区域不被浮动元素覆盖，而达到自适应父级剩余宽度。
Tip：
- 在IE6下，左右两个板块之间会有3px的间隙。
2.利用float+margin兼容IE6的做法：
html:
<div class="wrap clearFix">
<div class="left"></div>
<div class="right">
<div class="right-con"></div>
</div>
</div>
css:
.left{
float:left;
width:300px;
height: 400px;
background: red;
}
.right{
float:left;
margin-left: -300px;
width: 100%;
}
.right-con{
margin-left: 300px;
height: 400px;
background: yellow;
}
两列布局-左侧定宽，右侧自适应2.png
left和right的父级通过浮动排成一行，right的父级通过margin-left的负值位移使其左侧与其父级元素左侧对齐。
Tip：
- 不能给right的父级添加背景或边框这样的样式，会覆盖left。
3.利用overflow：hidden;
html:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
css:
.left{
float: left;
width:300px;
height: 400px;
background: red;
}
.right{
height:400px;
background: yellow;
overflow: hidden;
}
两列布局-左侧定宽，右侧自适应3.png
right元素overflow：hidden;触发元素bfc，使其不被浮动元素覆盖，从而自适应父级剩余宽度。在IE6下，元素的height属性值不为auto时，会触发haslayout，也会重新计算元素宽度。
Tip：
- 在IE6下，左右两个板块之间也会有3px的间隙。
4.利用position+margin的做法：
html:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
css:
.left{
position: absolute;
left: 0;
top: 0;
width:300px;
height:400px;
background: red;
}
.right{
margin-left: 300px;
height:400px;
background: yellow;
}
两列布局-左侧定宽，右侧自适应4.png
绝对定位之前在居中布局中也用到过，就不多讲了。你可以理解为在公告栏上订一块专属的内容区。注意原公告栏贴的东西不要被遮住了哟。
5.利用table的做法：
html:
<table class="wrap">
<tr>
<td class="left">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
这是左侧定宽区域，我文字超出也不会改变元素的宽度
</td>
<td class="right"></td>
</tr>
</table>
css:
.wrap{
width: 100%;
margin:0 auto;
table-layout: fixed;
/* 固定表格布局 */
}
.left{
width:300px;
background: red;
}
.right{
background: yellow;
}
两列布局-左侧定宽，右侧自适应5.png
固定表格布局，使其内单元格水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。从而达到需要的定宽与自适应的布局要求。
6.利用弹性盒模型flex的做法：
html:
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
.wrap{
display: flex;
width: 100%;
}
.left{
width:300px;
height:400px;
background: red;
}
.right{
flex:1;
height:400px;
background: yellow;
}
两列布局-左侧定宽，右侧自适应6.png
flex：子元素的弹性尺寸设置。为了更直观了解flex的用法，我们可以引入两个简单的公式：
- 父级空间的弹性尺寸 = 父级尺寸 - 内容中固定宽的部分;
- 子元素的尺寸 = 父级空间的弹性尺寸 * （当前子元素的flex值/所有子元素的flex值得和）
这里，我们只对right设置flex的值，那么它的宽度在父级空间的弹性尺寸中占比为1:1醫父级减去定宽内容尺寸后的剩余尺寸。
以上就是左侧一列内容定宽右边自适应的情况。根据其原理，你也可以根据需求写出左侧多列定宽的情境。
二、左侧自适应与右列定宽
在此之前我们讲过左列固定的情况，那现在右侧固定是不是只需要固定宽度的值给右边就行了呢？其实不然，在HTML结构书写中，我们一般讲求从上到下分行，从左到右分列的原则；在不改变元素书写顺序的情况下，许多属性是对元素方向有一定要求的。通过下面的例子我们简单聊聊。
1.利用float+margin的做法：
html:
<div class="wrap clearFix">
<div class="left">
<div class="left-con">left</div>
</div>
<div class="right">right</div>
</div>
css:
.wrap{
width: 100%;
margin:0 auto;
}
.left{
float:left;
margin-right: -300px;
width: 100%;
height: 400px;
background: yellow;
}
.left-con{
height: 100%;
margin-right: 300px;
}
.right{
float:left;
width:300px;
height: 400px;
background: red;
}
两列布局-右侧定宽，左侧自适应1.png
left利用margin-right负值减少其占位但其内容尺寸没变，right重叠在left之上，left最好新建一个内容子元素，适应剩余尺寸。
2.利用position+margin的做法：
html:
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
.wrap{
position: relative;
margin:0 auto;
width: 100%;
}
.left{
margin-right: 300px;
height:400px;
background: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width:300px;
height:400px;
background: red;
}
两列布局-右侧定宽，左侧自适应2.png
原理同上一章。
Tip：
- 在IE6下，定位父级的宽高是奇数的话，元素的right和bottom值会有1px的偏差
3.利用table的做法：
html:
<table class="wrap">
<tr>
<td class="left"></td>
<td class="right">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
css:
.wrap{
width: 100%;
margin:0 auto;
table-layout: fixed;
}
.left{
background: yellow;
}
.right{
width:200px;
background: red;
}
两列布局-右侧定宽，左侧自适应3.png
原理同上一章。
4.利用flex的做法：
html:
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
.wrap{
display: flex;
width: 100%;
}
.left{
flex:1;
height:400px;
background: yellow;
}
.right{
width:300px;
height:400px;
background: red;
}
两列布局-右侧定宽，左侧自适应4.png
原理同上一章。
三、两侧定宽，中栏自适应
传说中的圣杯或者双飞翼布局，伟大的淘宝主页上也有这种布局方式。门户网站使用的还是比较多的。一般中间内容可能需要优先渲染，那么在写结构的时候我们把它写在前面。简单分析一下两种常见方法。
三列布局-两侧定宽，中栏自适应.png
1.利用绝对定位来做：
html:
<div class="wrap">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
.wrap{
position: relative;
}
.center{
margin: 0 300px;
height: 400px;
background: yellow;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: red;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 400px;
background: red;
}
三列布局-两侧定宽，中栏自适应.png
2.利用float+margin来做：
html:
<div class="wrap">
<div class="center">
<div class="center-cont">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
.center{
float:left;
width:100%;
}
.center-cont{
margin:0 300px;
height: 400px;
background: yellow;
}
.left{
float:left;
margin-left: -100%;
width: 300px;
height: 400px;
background: red;
}
.right{
float:left;
margin-left: -300px;
width: 300px;
height: 400px;
background: red;
}
这里margin的百分比值是基于父级元素宽度的百分比，使left移动一行的距离。
如果不考虑优先加载还可以使用table和flex来进行布局也是非常简单方便。虽然，当前flex还有很多兼容性问题，但因为弹性布局的概念在响应式中非常的方便，相信相关规范也会更加的完善，我们使用起来会越来越便捷，平台的兼容性也会更好。虽然，现在不提倡使用table来布局，但它依然应该存在的地方。
demo：https://github.com/MornMartin/layout-fixed-responsive
网友评论