锦瑟(李商隐)

锦瑟无端五十弦,一弦一柱思华年。

庄生晓梦迷蝴蝶,望帝春心托杜鹃。

沧海月明珠有泪,蓝田日暖玉生烟。

此情可待成追忆,只是当时已惘然。

">
立诚勿怠,格物致知
It's all about connecting the dots

多行多栏布局


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

赞(2) 打赏
文章名称:《多行多栏布局》
文章链接:https://www.orzzone.com/%e5%a4%9a%e8%a1%8c%e5%a4%9a%e6%a0%8f%e5%b8%83%e5%b1%80.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

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

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册