CSS布局方案——多列布局

摘要: css 多列 布局

左定宽+右自适应

假设有HTML如下：

<div class="parent">
<div class="left">left，假设width=100px</div>
<!-- left和right间有20px间距 -->
<div class="right">right</div>
</div>

方案一：

float

+

margin

CSS代码：

.left { float:left; }
.right { margin-left:120px; }

优点：简单，兼容性好。

缺点：1、IE6中

float

会产生3px的缩进，因此需要在left中加上

_margin-right:-3px

；2、如果在right中清除浮动，则right会掉下去（right的

border-top

与left的

border-bottom

齐平）。

方案二：

float

+

margin

+

.fix

先给right外再套一层div.right-fix，html如下：

<div class="parent">
<div class="left">left</div>
<div class="right-fix">
<div class="right">right</div>
</div>
</div>

CSS代码：

.left { float:left; position:relative; _margin-right:-3px; }
.right-fix { float:right; width:100%; margin-left:-100px; }
.right { margin-left:120px; }

优点：同方案一。

缺点：1、IE6中

float

会产生3px的缩进；2、需要多加一层div。

方案三：

float

+

overflow

CSS代码：

.left { float:left; margin-right:20px; }
.right { overflow:hidden; }

优点：触发BFC。

缺点：IE6不支持该方案。

方案四：

table

+

table-cell

CSS代码：

.parent { display:table; table-layout:fixed; width:100%; }
.left, .right { display:table-cell; }
.left { padding-right:20px; }

优点：

table-layout

实现了布局优先，加速table渲染。

缺点：1、代码较多；2、IE7-不支持

display:table

和

display:table-cell

；3、如有背景，需要设置

background-clip:content-box

，但

background-clip

是CSS3属性，IE8-不支持。

方案五：

flex

CSS代码：

.parent { display:flex; }
.right { flex:1; margin-left:20px; }

优点：不用设置left。

缺点：IE8-不支持

flex

；且

flex

性能较差，只适合小范围、结构简单的布局。

拓展：左定宽+中自适应+右定宽

左不定宽 + 右自适应

假设有HTML如下：

<div class="parent">
<div class="left">left，width通过内容撑开</div>
<!-- left和right间有20px间距 -->
<div class="right">right</div>
</div>

方案一：

float

+

overflow

CSS代码：

.left { float:left; margin-right:20px; }
.right { overflow:hidden; }
/* .left *{ width:100px;}  通过内容将left撑开*/

优缺点：见定宽的方案三。

方案二：

table

+

table-cell

CSS代码：

.parent { display:table; width:100%; } /* 要实现内容优先，所以不用table-layout */
.left, .right { display:table-cell; }
.left { width:0.1%; padding-right:20px; }

优缺点：见定宽的方案四。

PS：将left的

width

设置足够小的值，但不要用px（1px在IE8下有问题），然后通过内容撑开left。

方案五：

flex

CSS代码：

.parent { display:flex; }
.left { width:100px; margin-right:20px; }
.right { flex:1; }

缺点：见定宽的方案五。

拓展：不定宽*N + 自适应

等分

假设有HTML如下：

<div class="parent">
<div class="col">第一列</div>
<!-- 此处省略m列；共n列，每列宽度一样，列间间距也一样（假设为20px） -->
<div class="col">第N列</div>
</div>

方案一：

float

+

box-sizing

CSS代码（假设有4列）：

.parent { margin-left:-20px; }
.col { float:left; width:25%; padding-left:20px; box-sizing:border-box;}

思路：总宽度 + 间距 = （每列宽度 + 间距）*N

缺点：1、IE7-中对于浮点数的处理有问题（不能整除时）；2、结构与样式耦合性强，列数变化要修改css样式；3、parent左侧多一列间距。

方案二：

table

+

.fix

现在parent外套一层div.parent-fix，html如下：

<div class="parent-fix">
<div class="parent">
<div class="col">省略n个div.col</div>
</div>
</div>

CSS代码：

.parent-fix { margin-left:-20px; }
.parent { display:table; width:100%; table-layout:fixed; }
.col { display:table-cell; padding-left:20px; }

思路：table宽度随着内容变化；未设置单元格宽度时，

table-layout

使其宽度平分。

优点：结构与样式解耦合。

缺点：1、多套一层div；2、parent左侧多一列间距。

方案三：

flex

CSS代码：

.parent { display:flex; }
.col { flex:1; }
.col + .col { margin-left:20px; }

思路：

flex:1

等分容器的剩余空间。

优点：结构与样式解耦合；设置简单。

缺点：IE8-不支持

flex

。

拓展：九宫格

等高（左自适应 + 右定高）

假设有HTML如下：

<div class="parent">
<div class="left">left，假设width为100px</div>
<!-- left和right间有20px间距 -->
<div class="right">right</div>
</div>

方案一：

table

+

table-cell

见定宽的方案四。

表格每行的单元格天然等高。

方案二：

flex

见定宽的方案五。

flex

布局的

align-items

属性的默认值为

stretch

，天然等高。

方案三：

float

+

overflow

CSS代码：

.parent { overflow:hidden; }
.left, .right { padding-bottom:9999px; margin-bottom:-9999px; }
/* .left{ float:left; margin-right:20px; } */
/* .right{ overflow:hidden; } */

思路：

margin-bottom

和

padding-bottom

相互抵消，再用

overflow

截断。

缺点：伪等高，实际上容器还是很大。