因为最近心血来潮,就总结了一下css中的几种常见的多列布局。
两列自适应布局
两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用。
这种布局通常是左侧固定,右边自适应,当然也有反过来的,道理一样,这里有好几种方法。
(张鑫旭老师的博客是左边流式布局,右边固定宽度)
左浮动+margin
因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。
这个时候只要对右边元素设置margin-left:左边div宽度 就可以实现自适应布局。
代码:左浮动实现两列布局
绝对定位实现两列布局
这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右div的margin-left就能实现布局。
代码:绝对定位实现两列布局
flex实现两列布局
flex布局一直挺好用,无奈兼容性捉急,ie10+才支持。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
flex布局默认项目是主轴为水平方向,最主要的是flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
大概就是给左边的div一个固定值,然后给右边设置flex:auto;来实现两列布局。
这里不多对flex布局介绍,有兴趣的可以看一下
阮一峰老师的这篇博客:flex布局
这里是代码链接:flex布局实现两列布局
calc实现两列布局
这是css3里面的新属性,兼容性还可以,在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。
通过calc可以使用百分比、em、px和rem单位值计算出其宽度或者高度,这样就不用考虑div值到底是多少。所以可以对右边div设置width:calc(100%-100px);来实现自适应布局。
代码链接:calc实现两列布局
浮动+margin负值来实现
这是之前写ife任务的时候在一篇博客上看到的。
实现方法是给右边的div外面再套上一个父div,然后让父div的宽度设为100%。
对父div和左边的div都设置左浮动,再让左div的margin-left:-100%,右div设置margin-left:左div的宽度。
这样就实现了自适应布局,当然左右div的前后顺序要反过来。
具体看代码:margin负值实现自适应
三列自适应布局
除了常见的两列布局,我们也经常能够见到三列布局,左右固定,中间自适应。
(这里只是拿这张图举个例子,w3school官网是三列固定布局)
浮动实现三列布局
这个类似两列布局的浮动,对左右div分别设置左右浮动,中间div设置margin-left和margin-right来实现,当然在html中的顺序应该是左右中。
代码链接:浮动实现三列布局
margin负值实现三列布局
原理同margin负值实现两列布局,不多说了。
直接上代码:margin负值实现三列布局
flex实现三列布局
和flex两列布局一个原理,对两边设置flex:0 0 100px,中间设置flex:auto。
代码代码:flex实现三列布局
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。