css多列布局划分为4列,CSS多列布局
需要注意的是：本篇⽂章的布局，都未对⽗元素进⾏清除浮动的操作，所以在有⼀些使⽤了float的布局中，需要在parent容器清除浮动，才能在实际情况下使⽤。(清除浮动的⽅式在这⾥不做讨论)
⼀列定宽⼀列⾃适应
这部分的html结构如下：
left
right
right
⼤家先来看看直接在左侧添加浮动是怎么样的吧：
不要觉得诧异！因为float最开始的出现就是为了实现这个⽂字环绕效果的，只不过被攻城师们玩坏了，⽤到了布局上；但这肯定不是我们想要的，来看看我们想要的是怎么样的吧！
这样才对嘛！是我们想要的！下⾯就来看看css的实现吧：
1. float+margin
.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
优点：兼容IE7+，便于理解；缺点：不兼容IE6，在right内部第⼀个元素存在清除浮动时，会发⽣right
掉下去的情况。
⼀起来看看错误的例⼦：
怎么解决呢？
2. 改进版---float+margin+fix
优点：兼容性好，兼容所有浏览器；缺点：结构增加，样式复杂。
布局改变如下：
box sizingleft
right
css部分：
.
left{
float: left; width: 100px;
position: relative; /*提升左边的层级*/
}
.right-fix{
float: right; width: 100%;
margin-left: -100px;/*处理右边掉下来的情况*/
}
.right{
margin-left: 120px;
}
3. float+overflow
优点：设置简单；
.left{
float:left;
width:100px;
margin-right:20px;
}
.right{
overflow:hidden;/*触发BFC*/
/*_zoom:1;*/ /*IE6使⽤zoom:1来触发BFC*/
}
3. table
HTML结构还是和第⼀个⼀样。
优点：加速table渲染，实现布局优先；缺点：代码量⼤，复杂.parent{
display: table; width: 100%;
table-layout: fixed;/*加速table渲染，实现布局优先*/
}
.left,.right{
display: table-cell;
}
width: 100px;
padding-right: 20px;
}
4. flex
优点：结构简单；缺点：兼容性差iE10+，性能不好，常⽤作⼩范围布局.parent{
display: flex;
}
.left{
width: 100px;
margin-right: 20px;
}
.right{
flex:1;/**/
}
多列定宽⼀列⾃适应
⼤家来看看想要达到的效果：
其实只是在上⾯的布局上，中间再加⼊⼀个center。
html结构如下：
left
center
right
right
css部分：把center设置和left⼀样
.
left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
⼀列不定宽,⼀列⾃适应
HTML结构同⼀列定宽⼀列⾃适应。
其实就是对⼀列定宽,⼀列⾃适应的后三个进⾏⼀下改造
实现效果和上⾯⼀样，但是宽度不在固定了！
1. float+overflow
优点：兼容性好，使⽤最多，结构简单；(其实和上⾯的改变就是左侧使⽤内容去撑开⾼度，因为原来的实现已经达到了这个效果) .left{
float:left;
margin-right:20px;
/*width:200px;*//*可设置宽度，也可使⽤内容撑开*/
}
.right{
overflow:hidden;
}
.left p{width:200px;}/*使⽤内容去撑开宽度*/
2. table
缺点：⽀持IE8+，设置复杂。
对css进⾏如下更改：
.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;/*只要⾜够⼩就⾏*/
padding-right: 20px;
}
.left p{width:200px;}/*使⽤内容去撑开宽度*/
3. flex
缺点：还是上⾯的问题
.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.
right{
flex:1;/**/
}
.left p{width:200px;}/*使⽤内容去撑开宽度*/
两列不定宽，⼀列⾃适应。
HTML结构同两列定宽⼀列⾃适应。
以float+overflow为例，只需要把center设置和left⼀样就可以了。
.left,.center{
float: left;
margin-right: 20px;
}
除了这个⽅法之外，上⾯的不定宽中的三个⽅法都能使⽤
等分布局
html结构如下：
1
2
3
4
按照惯例，先来分析⼀下实现过程。可以看到下图：
其实我们只需要给⽗容器增加⼀个G，也就是⼀个负的margin就可以实现了，下⾯就来看看吧：
1. float+margin
优点：设置简单；缺点：⽀持IE8+，在布局变更时，需改变css样式(width：XX%)结构和样式耦合在了⼀起p{background:#666;}/*对div中的p标签设置才有间隔效果，所以在设置内容时，也是在p中设置*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。