多列布局
简单来说,多列布局就是几个元素呈现水平方式排列的效果
分类:
- 两列布局
- 等分布局
- 三列布局
- 等高布局
- 圣杯布局与双飞翼布局
- 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 相关使用(两种方法)
方法同两列布局的,完全相同。
再加一个定宽就完事了。