html多列布局,多列布局方案整理_html/css_WEB-ITnose

了解 CSS 中属性的值及其特性， 透彻分析问题和需求才可以选择和设计最适合的布局解决方案。

多列布局在网页中非常常见(例如两列布局)，多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。

定宽-自适应

有如下布局 left

right

right

float+margin .left { float: left; width: 100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ }

优点：容易理解

缺点：IE6中会有3像素的BUG， 解决方法可以在.left 加入 margin-left:-3px。

因为left是浮动元素，right是没有浮动的，如果right内容中有清楚浮动就会产生bug。

改进：float + margin + (fix) left /*外层在包裹一个容器*/

right

right

兼容性很好，适用于多版本浏览器(包括 IE6)但是多了层right-fix的结构。但left不可选择，被right-fix盖住。需要设置left的 position: relative;来提高层级。

float+overflow .left{ float: left; width: 100px; margin-right: 20px; } .ri