CSS布局——经典布局总结（二）

左边固定宽度，右边自适应的实现

**> 
 
  
 
  
  
  
  
   
   
   
   

     Left sidebar 
   
 
 
  
 
  
  
  
  
   
   
   
   

     Main Content 
   
> 
> 

http://jsfiddle.net/w3cplus/F3UwB/

实现方法

1）左边设置浮动和固定宽度，右边设置外边距为左边宽度。

2）使用浮动和负外边距进行实现。这时可在外面套一个wrapper border-left设置为左边那块的宽度进行实现。

多列等高实现

实现方法

在多列里都写上padding-bottom:2000px;margin-bottom:-2000px;再把负容器设置超出则隐藏overflow:hidden.这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度就被撑到它里面最高那列的高度，其他比这列矮的列则会用他们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功地完成了一次障眼法。

https://jsfiddle.net/sheilaCat/vbk8etsj/2/

多列等高，锚位置会出现问题（道听途说）

左右固定 中间适应

实现方法

1)左右侧采用浮动，中间采用margin-left和margin-right方法

或者左右侧各自设置负外边距

注：必须左右中的顺序来放。不然左边你浮动后，中间不浮动。中间的宽度实际上占据了整行。右侧要另起一行做浮动。

实现：https://jsfiddle.net/sheilaCat/h3r0oahb/1/

2)左右两侧采用绝对定位，中间依然采用margin-left和margin-right

经典布局内容：

• 两列右侧自适应布局

• 两列左侧自适应布局

• 两列定宽布局

• 三列中间自适应布局

• 三列左侧自适应布局

• 三列右侧自适应布局

参考 兼容解决方案布局：

http://nec.netease.com/library/category/#grid

布局的关键就在于浮动的设置、宽度的设置和相应外边距的设置。

另外还可以设置相对或绝对定位，可设置display值。