多列布局
简单来说，多列布局就是几个元素呈现水平方式排列的效果
分类：
- 两列布局
- 等分布局
- 三列布局
- 等高布局
- 圣杯布局与双飞翼布局
- CSS3多列布局
两列布局
一般情况下是指定宽于自适应布局，两列中左列是确认的宽度，右边是自动填满剩余所有空间的一种布局效果 定宽+自适应
实现方法
- float + margin 属性配合使用
- float + overflow 属性配合使用
- display 属性的table 相关使用（两种方法）
实现效果
float + margin
利用float: left;使得left的这个div靠左浮动，再用margin-left: 100px;使right的这个div左外边距为100px，这样左边的div就是固定宽度，而右边的div就是自适应宽度
.left {
height: 300px;
/*定宽*/
width: 100px;
float: left;
background-color: gray;
}
.right {
height: 300px;
margin-left: 100px;
background-color: sandybrown;
}
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右：自适应</div>
</div>
优点：
实现方式简单
缺点：
- 自适应元素margin属性值与定宽元素的width属性值保持一致
- 定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好
- 相关值耦合度高
缺点优化版
为自适应元素创建一个父元素
.left {
height: 300px;
/*定宽*/
width: 100px;
float: left;
background-color: gray;
}
.right {
height: 300px;
margin-left: 100px;
background-color: sandybrown;
}
/*容器-自适应*/
.right-fix {
/*设置为浮动，导致默认宽度为 0*/
float: right;
/*当前文档脱离文档流*/
width: 100%;
margin-left: -100px;
}
<div class="parent">
<div class="left">左：定宽</div>
<div class="right-fix">
<div class="right">右：自适应</div>
</div>
</div>
float + overflow
.left {
width: 200px;
float: left;
background-color: gray;
}
.right {
overflow: hidden;
/*开启BFC模式-当前元素的内部环境与外界完全隔离*/
background-color: sandybrown;
}
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右：自适应</div>
</div>
优点：
简单易用，无第一种方法那么多缺陷
缺点：
overflow 属性不仅解决了两列布局问题，同时设置了内容溢出的情况
display 属性的table 相关使用
将父元素display设置为table，把子元素的display设置为table-cell
如果没有设置宽度，子元素就会
.parent {
width: 100%;
display: table;
/*表格的单元格的宽度会自动分配；如果单元格未设置宽度，就会自动分配50%*/
table-layout: fixed;
}
.left,
.right {
height: 300px;
display: table-cell;
/*表格中的单元格*/
}
.right {
background-color: burlywood;
}
.left {
width: 400px;
background-color: azure;
}
body同上一个方法
优点：
浏览器兼容性比较好
缺点：
将所有元素的display属性设置为table相关值，受到相应制约
三列布局
三流布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果 定宽+定宽+自适应
就是在两列布局的基础上增加了一个定宽
实现方法
- float + margin 属性配合使用
- float + overflow 属性配合使用
- display 属性的table 相关使用（两种方法）
方法同两列布局的，完全相同。
再加一个定宽就完事了。