多行多栏布局


Page Header

Here should be a picture, but I hadn't upload a picture for this place.

Column 1 of 3

Some text

Column 2 of 3

Column 3 of 3

Column 1 of 4

Some text

Column 2 of 4

Column 3 of 4

Column 4 of 4

Page footer.

Page Header

Here should be a picture, but I hadn’t upload a picture for this place.

Column 1 of 3

Some text

Column 2 of 3

Column 3 of 3

Column 1 of 4

Some text

Column 2 of 4

Column 3 of 4

Column 4 of 4

Page footer.

有三列的那一行是通过浮动三个设定了宽度的块级元素和他们共同的父元素(作为容器)以实现的。三个块级元素的宽度(未设置border、padding和margin的情况下)之和等于父元素的宽度。这个方法的缺点是并非每一列的高度都能一致。

有四列的那一行是通过将四列对应的容器的display设置为table-cell实现的(不需要对他的祖先设定display: table-row或display: table),这样在实现多列布局的同时还能让每一列的高度相同。唯一的缺点是IE7及7以下不支持,所以可以说是多列布局的最优实践了。

这里需要强调一下,由于四列对应行上面的三列对应行是浮动着的,所以四列行别忘了开始的时候要用clear清浮动。

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据