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

为什么80%的码农都做不了架构师？>>>   

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

<pre><code> **> <div id="left">Left sidebar</div> <div id="content">Main Content</div> > > <style type="text/css"> *{ > margin: 0; > padding: 0; } > > #left { > float: left; > width: 220px; > background-color: green; } > > #content { > background-color: orange; > margin-left: 220px;/*==等于左边栏宽度==*/ }** </style></pre></code>

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值。

转载于:https://my.oschina.net/sheila/blog/403197