一、课程信息
课程名称：一课全面掌握主流CSS布局
课程章节：第9章 等分布局
主讲老师：KingJ
二、课程内容
- 等分布局概念
- 等分布局两种解决方案及两种解决方案的优点与缺点
三、课程收获
通过学习掌握了CSS等分布局概念的两种方式，通过代码演示和对比两种方式的优缺点，更加深刻认识到了CSS等分布局使用情景。
1 什么是等分布局
概念
等分布局就是指一行被分为若干列，每一列的宽度是相同的值
实现方式
- float属性实现等分布局效果
- display属性的值有关table实现等分布局效果
2 等分布局解决方案一
示例
<div class="parent">
<div class="col1"><p>1</p></div>
<div class="col2"><p>2</p></div>
<div class="col3"><p>3</p></div>
<div class="col4"><p>4</p></div>
</div>
css
.col1,.col2,.col3,.col4{
height: 300px;
float: left;
width: 25%;
box-sizing: border-box;
}
.col1{
background-color: red;
}
.col2{
background-color: yellow;
}
.col3{
background-color: blue;
}
.col4{
background-color: green;
}
3 等分布局解决方案二
示例
<div class="parent">
<div class="col1"><p>1</p></div>
<div class="col2"><p>2</p></div>
<div class="col3"><p>3</p></div>
<div class="col4"><p>4</p></div>
</div>
css
.parent{
display: table;
width: 100%;
}
.col1,.col2,.col3,.col4{
height: 300px;
display: table-cell;
}
.col1{
background-color: red;
}
.col2{
background-color: yellow;
}
.col3{
background-color: blue;
}
.col4{
background-color: green;
}
4 等分布局存在空白间距的情况
实现等分布局时，如果需要每一列之间实现空白间隔区域的话，
公式： 间距+容器宽度=（间距+列宽度）*N
5 等分布局方案一修改版
在原有HTML页面源码基础上，添加一个容器
<div class="parent-fix">
<div class="parent">
<div class="col1"><div class="inner"></div></div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
css
.parent-fix{
overflow: hidden;
}
.parent{
height: 300px;
margin-left: -10px;
}
.col1,.col2,.col3,.col4{
height: 300px;
float: left;
width: 25%;
box-sizing: border-box;
padding-left: 10px;
}
.inner{
height: 300px;
}
.col1 .inner{
background-color: red;
}
.col2 .inner{
background-color: yellow;
}
.col3 .inner{
background-color: blue;
}
.col4 .inner{
background-color: green;
}
6 等分布局方案二修改版
在原有HTML页面源码基础上，添加一个容器
<div class="parent-fix">
<div class="parent">
<div class="col1"><div class="inner"></div></div>
<div class="col2"><div class="inner"></div></div>
<div class="col3"><div class="inner"></div></div>
<div class="col4"><div class="inner"></div></div>
</div>
</div>
css
.parent-fix{
overflow: hidden;
}
.parent{
display: table;
width: 1434px;/*实际宽度*/
margin-left: -10px;
}
.col1,.col2,.col3,.col4{
height: 300px;
display: table-cell;
box-sizing: border-box;
padding-left: 10px;
}
.inner{
height: 300px;
}
.col1 .inner{
background-color: red;
}
.col2 .inner{
background-color: yellow;
}
.col3 .inner{
background-color: blue;
}
.col4 .inner{
background-color: green;
}