Faster, Higher, Stronger
更快,更高,更强

多行多栏布局


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清浮动。

赞(0) 打赏
未经允许不得转载:峰间的云 » 多行多栏布局

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏