快速而有效的 CSS 多栏布局技巧

发布日期:2015-08-15 19:58:50

在我的网站建设工作中,有一些 CSS3新特性会被经常使用,还有一些则基本不用。在开始冗长的讲解之前, 我想先给大家分享几个能让工作更轻松的 CSS3小技巧, 尤其是响应式设计方面的,用它们可以完成以前会让人头疼的简单任务。

曾经有需要将一整段文本显示在多个栏位中?在 CSS3出现之前, 你必须将内容拆分到不

同的标签中,然后分别设定样式。因为样式原因而修改标签永远不是什么好做法。CSS3
可以让我们将一段或多段内容分布到多列网格中。请看如下代码:
<div id="main" role="main">
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// 任意文字 //
</p>
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// 任意文字 //
</p>
</div>
你可以通过设定具体栏位宽度(如 12em )或者栏位数量(如 3 )来使内容分布在多列网
格中,做法如下。
如果设定栏位宽度,语法如下所示(注意,为简洁起见代码中省略了私有前缀) :
#main {
column-width: 12em;
}
按照上述的设定,无论视口尺寸是多少,内容都会分布在宽度为 12em的栏位中。视口尺

寸发生变化之后,浏览器会自动调整栏位数量。

只需极少量代码就能完成这样精美的响应式布局——我喜欢!
如果你想保持栏位数量不变而让栏位宽度根据视口自动调整,可以参考如下代码:
#main {
column-count: 4;
}
增加栏位间隙和分割线
增加栏位间隙和分割线可以让多列布局的效果更好,代码如下:
#main {
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}
目前,请切记你需要给多列布局声明使用私有前缀(css3元素私有前缀及其用法),以确保兼容最广泛的浏览器。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计