本篇文章给大家介绍一下css多栏自适应布局。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
首先，在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。
1、固定布局
说到固定布局想必大家已经觉得无爱了，但我还是要简单地讲一下，下面通过一个简单的实例进行讲解：
html代码：
css代码：.wrap{
width:500px;
height:400px;
border:1px solid red;
margin:0 auto;
}
.left{
width:200px;
height:400px;
background:#ccc;
}
.right{
width:300px;
height:400px;
background:#ddd;
}
我们希望的布局效果是500px宽的容器内分别有一个200px宽和300px宽的子元素容器，可此时运行结果为：
这是因为div元素是块级元素，默认是会占据整行的，于是我们就采用浮动的方法来解决这个问题。
此时我们只需要再添加如下样式：.left,.right{
float:left;
}
那么就能得到我们想要的结果了：
由于这里只有两栏布局，而且都是固定布局，并且刚好占满父容器，所以第二个子元素右浮动也是一样的效果。但如果是多栏布局(比如四栏布局)并且刚好占满父容器的话，那么最后一个可以是左浮动或者右浮动。
对于两栏固定布局，其实并不一定两个子元素都需要左浮动，可以第一个子元素左浮动，第二个设置margin-left值撑开就行了：.left{
float:left;
}
.right{
margin-left:200px;
}
这样也能实现上面的效果。但如果是多栏固定布局，个人觉得还是浮动比较方便。
在固定布局中，除了浮动之外，还有一种比较常用的方法就是定位。
把上面的样式代码改一改：.wrap{
position:relative;
}
.left{
position:absolute;
top:0;
left:0;
}
.right{
position:absolute;
top:0;
left:200px;
}
这样写同样能达到之前的那种效果，但定位布局比较烦的就是得精确计算每一块的位置。
所以，个人觉得目前固定布局一般会结合浮动+定位+必要时的内外边距来进行布局会更加实用。当然了，浮动+定位+内外边距也同样适用于自适应布局，彼此之间都不是等号关系的。
2、两栏自适应布局
同样是上面的实例，我把它改成自适应布局：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
}
.left{
width:40%;
height:100%;
float:left;
background:#ccc;
}
.right{
width:60%;
height:100%;
float:left;
background:#ddd;
}
此时运行看一下结果：
因为现在已经改成流式布局了，所以容器的宽度会随着浏览器的宽度而按比例缩放。当然，需要配合浮动或者定位。
但是CSS3提供了一种更好的弹性伸缩布局flexbox，看看怎么实现：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
display:flex;
}
.left{
flex:2;
background:#ccc;
}
.right{
flex:3;
background:#ddd;
}
是不是更简单。所以说，不管多少栏布局(实际开发中也不会很多栏的)，通过流式布局或者flexbox弹性伸缩布局基本能解决。但目前来说，弹性布局兼容性还不是很好，所以用得比较多的还是移动端布局，但总体上更多的还是使用流式布局，必要时可以配合媒体查询。
既有固定布局也有自适应布局
还是上面的实例，现在两栏布局第一个子元素固定宽度，而第二个子元素自适应剩余的宽度，该怎么做？
第一种方法就是给第二个子元素加左外边距，挤出来：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
}
.left{
width:200px;
height:300px;
float:left;
background:#ccc;
}
.right{
height:100%;
margin-left:200px;
background:#ddd;
}
结果就是这样的：
第二种方法就是绝对定位+外边距：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
position:relative;
}
.left{
width:200px;
height:300px;
background:#ccc;
position: absolute;
top:0;
left:0;
}
.right{
height:100%;
background:#ddd;
margin-left:200px;
}
但其实第一种方法和第二种方法原理是一样的，换汤不换药罢了。
第三种方法，利用BFC特性：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#ccc;
float:left;
}
.right{
height:100%;
background:#ddd;
overflow: hidden;
}
这里给第二个子元素设置了overflow:hidden之后呢，它就生成了一个BFC块，BFC其中的一个布局规则就是不会和float box 发生重叠，于是就和第一个浮动了的子元素隔开了，我说得比较苍白，大家可以去多了解BFC的一些布局特性，包括如何生成一个新的BFC块。那为了方便，我这里就把BFC的一些相关知识点直接放上来给大家了解一下：
BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC：根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
OK，还有一种方法就是flex布局：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
display:flex;
}
.left{
width:200px;
height:300px;
background:#ccc;
}
.right{
height:100%;
background:#ddd;
flex:1;
}
是不是也挺方便的？现在我提升一下难度，现在是三栏布局，左右栏固定宽度，中间自适应，该怎么做？
这时候flex布局就是最佳的选择了：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
display:flex;
}
.left{
width:200px;
height:300px;
float:left;
background:#ccc;
}
.right{
width:200px;
height:300px;
float:right;
background:#ddd;
}
.center{
height:100%;
background:#666;
flex:1;
}
这种本来就很苦恼的布局，对于flex布局来说都能轻松解决意外烦恼。
且慢，如果我想让中间的子元素优先渲染呢？
这时的情况是这样的：
这时候吧，还是得利用flex来解决这个问题：.wrap{
width:80%;
height:400px;
border:1px solid red;
margin:0 auto;
display:flex;
}
.left{
width:200px;
height:300px;
float:left;
background:#ccc;
order:1;
}
.right{
width:200px;
height:300px;
float:right;
background:#ddd;
order:3;
}
.center{
height:100%;
background:#666;
flex:1;
order:2;
}
这时候出来的效果就是我们想要的：
好的，关于多栏自适应布局我就讲到这里，其他方面的知识扩展与应用，就留给大家去研究了。本文转载自：https://www.cnblogs.com/jr1993/p/4788718.html
更多web开发知识，请查阅 HTML中文网 ！！
扫一扫
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
