css中的那些布局

由于最近心血来潮，就总结了一下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实现三列布局