一、课程信息
课程名称：一课全面掌握主流CSS布局
课程章节：第5章 两列布局
主讲老师：KingJ
二、课程内容
- 多列布局的概念和分类
- 两列布局的概念和实现方式
- 两列布局的三种方式及优缺点
三、课程收获
通过学习掌握了CSS两列布局的三种方式，通过代码演示和对比三种方式的优缺点，更加深刻认识到了CSS两列布局的使用情景。
1 什么是多列布局
概念
简单来说，就是几个元素呈现水平方式排列的效果
多列布局的分类
- 两列布局（定宽+自适应）
- 三列布局
- 圣杯布局
- 双飞翼布局
- 等分布局
- 等高布局
- CSS3多列布局
2 什么是两列布局
概念
两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果。
实现方式
- float + margin属性配合使用
- float + overflow属性配合使用
- display属性的table相关值使用
3 两列布局之方案一
示例
<!-- 定义父级元素 -->
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右：自适应</div>
</div>
CSS代码实现垂直方向居中布局：
.parent{
width: 1000px;
height: 600px;
background: #ccc;
}
.left,.right{
height: 300px;
}
.left{
width: 300px;
background: #c9394a;
/* 设置浮动，当前元素脱离文档流 */
float: left;
}
.right{
background: #cccccc;
margin-left: 300px;
}
优点
实现方式简单
缺点
自适应元素margin属性值与定宽元素的width属性值保持一致
定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好
优化版
<!-- 定义父级元素 -->
<div class="parent">
<div class="left">左：定宽</div>
<div class="right-fix">
<div class="right">右：自适应</div>
</div>
</div>
CSS代码实现垂直方向居中布局：
.parent{
width: 1000px;
height: 600px;
background: #ccc;
}
.left,.right{
height: 300px;
}
.left{
width: 300px;
background: #c9394a;
/* 设置浮动，当前元素脱离文档流 */
float: left;
/* 设置显示层级更高 */
position: relative;
}
.right-fix{
float: right;
background: #fcfcfc;
width： 100%;
margin-left: -300px;
}
.right{
background: #cccccc;
}
4 两列布局之方案二
示例
<!-- 定义父级元素 -->
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右：自适应</div>
</div>
CSS代码实现垂直方向居中布局：
.left,.right{
height: 300px;
}
.left{
width: 400px;
background: #c9394a;
/* 设置浮动，当前元素脱离文档流 */
float: left;
}
.right{
background: #cccccc;
/* 开启BFC模式 - 当前元素的内部环境与外界环境隔离 */
overflow： hidden;
}
优点
上述解决方案中的问题在此解决方案中都没有
缺点
overflow属性不仅解决了两列布局，同时设置了内容溢出的情况
兼容性？？？非常好，BFC模式
5 两列布局之方案三
示例
<!-- 定义父级元素 -->
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右：自适应</div>
</div>
CSS代码实现垂直方向居中布局：
.parent{
/* 表格的单元格的宽度会自动分配 */
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
height: 300px;
display: table-cell;
}
.left{
width: 400px;
background: #c9394a;
}
.right{
background: #cccccc;
}
优点
浏览器兼容性比较好
缺点
将所有元素的display属性设置为table相关值，收到相应制约