转行学开发，代码100天——2018-03-24
本文将记录CSS布局之垂直布局解决方案。
常见的多列布局包括以下：
1.定宽+自适应
2.两列定宽+一列自适应
3.不定宽+自适应
4.两列不定宽+一列自适应
5.等分布局
6.定宽+自适应+等高
下文将先后对上述6种方案作详细说明。
1.定宽+自适应
- 使用float+overflow
实现方法：通过左边框脱离文本流，设置右边规定溢出元素框时发生的事情以达到多列布局，
即左边框：float:left;width/margin-left
右边框：overflow:hidden;
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left
{
float: left;
300px;
margin-left: 20px;
border:1px solid red;
}
.right
{
overflow: hidden;
600px;
border:1px solid orange;
}
（为了便于查看，添加了边框效果）
该方法简单，但不支持ie6.
- 使用float+margin方法
实现方法：通过将左边框脱离文本流，右边框向右移动一定的距离形成多列布局。
即：左边框：float:left;margin-left
右边框：margin-left:
.left
{
float: left;
margin-left: 200px;
border:1px solid red;
}
.right
{
margin-left:300px;
300px;
border:1px solid orange;
}
该方法中同时设置了左右边框的左边距，当右边距小于等于左边距时，会发生重叠。因此选用该方法设置多列布局时，要合理设置边距值。
该方法简单易用，依然存在兼容性问题。
- 使用foat+margin(改良版)
实现方法：在方法（1）的基础上，给右边框添加一个父框，设置左、右父框属性
即左边框：float:left;margin-left、position：relative
右边框(父)：float：right、100%;margin-left:(或者margin-right:)
右边框：margin-left:
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>
.left
{
float: left;
position: relative;
100px;
margin-left: 300px;
border:1px solid red;
}
.right-fix
{
margin-right:100px;
600px;
float: right;
border:1px solid orange;
}
.right
{
margin-left: 30px;
border:1px solid #ccc;
}
运行效果如下图，该方法设置属性及属性值时需要反复调整，易于理解。
- 使用table方法
实现方法：将父框设置为表格，将左右边框转化为同一行的td,实现多列布局
父框：display:table; 100%;table-layout:fixed;
左右框：display:table-cell,最后设置左框的width,padding-right属性
.parent
{
display: table;
100%;
table-layout: fixed;
}
.left,.right
{
display: table-cell;
border:1px solid red;
}
.left
{
300px;
padding-right: 20px;
}
- 使用CSS3的布局利器 flex方法
实现方法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex属性放置在不同盒子内，多列效果不同
.parent
{
display: flex;
flex: 1;
}
.left
{
300px;
margin-right: 100px;
border:1px solid red;
/*flex: 1;*/
}
.right
{
/*flex: 1;*/
border:1px solid red;
}
2.两列定宽+一列自适应
实现方法:
先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。
<!--两列定宽+一列自适应--> <div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
.left,.center
{
float: left;
300px;
margin-left: 30px;
}
.right
{
overflow: hidden;
}
3.不定宽+自适应
- 使用float+overflow方法
实现方法：左框：float:left/margin-right:
右框：overflow:hidden
最后可设置左框中的内容width
与定宽+自适应方法相比，只是减少了左右框的宽度设置。
.left
{
float: left;
margin-right: 20px;
border:1px solid red;
}
.right
{
overflow: hidden;
border:1px solid #ccc;
}
- 使用table方法
实现方法：先将父框设置为display: table、 100%，再设置左、右框display: table-cell，最后设置左框 0.1%、padding-right以及左框中的内容width。
.parent
{
display: table;
100%;
}
.left,.right
{
display: table-cell;
}
.left
{
0.1%;
padding-right: 20px;
}
.left p
{
200px;
}
- 使用flex方法
实现方法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。
.parent
{
display: flex;
}
.left
{
flex: 1;
margin-left: 20px;
}
.left p
{
300px;
}
flex功能强大，兼容性存在一定的问题。
4.两列不定宽+一列自适应
实现方法：先将左、中框设置为float:left;margin-right:..再设置右框overflow:hidden.最后给左中框中的内容设置width
.left,.center
{
float: left;
margin-right: 20px;
}
.right
{
overflow: hidden;
}
.left p,.right p
{
100px;
}
5.等分布局
- 使用float
实现方法：先将父框设置为margin-left：-*px;再设置子框float:left;25%;padding-left/box-sizing:border-box
<div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div>
.parent
{
margin-left: -20px;
}
.column
{
float: left;
25%;
padding-left: 20px;
box-sizing: border-box;
}
- 使用table方法
实现方法：
先将父框的修正框设置为margin-left: -*px，再设置父框display: table、100%、table-layout: fixed，设置子框display: table-cell、padding-left。
<div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </div>
.parent-fix
{
margin-left: -20px;
}
.parent
{
display: table;
100%;
table-layout: fixed;
}
.column
{
display: table-cell;
padding-left: 20px;
}
- 使用flex
实现方法：将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。
.parent
{
display: flex;
}
.column
{
flex: 1;
}
.column+.column
{
margin-left: 20px;
}
6.定宽+自适应+两块高度一样高
- 使用float方法
实现方法：父框 overflow：hidden；左右框设置为 padding-bottom：9999px；margin-left:-9999px；
左框：float:left;width/margin-right
右框：overflow:hidden
[ 伪等高，不是真正意义上的等高 ]
.parent
{
overflow: hidden;
}
.left,.right
{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left
{
float: left;
100px;
margin-right: 20px;
}
.right
{
overflow: hidden;
}
- 使用flex方法
实现方法：将父框设置为display: flex，再设置左框width、margin-right/margin-right，最后设置右框flex:1。
.parent
{
display: flex;
}
.left
{
300px;
margin-left:20px;
}
.right
{
flex: 1;
}
