应用CSS3能够为你的网站建立两列,而无需为每列制订特殊的层或段落。
应用CSS3能够为你的网站建立两列,而无需为每列制订特殊的层或段落。
上1篇文章内容:CSS3实例教程(5):网页页面情况照片
与多情况照片1样,CSS3两列也是我最钟爱的1个技术性。我想这条CSS3特性有在报纸和杂志合理布局中之外的许多潜伏的主要用途。假如你在某个念头或本人网站中应用了这类方式,请在下面的评价中递交你的连接,我很开心能确定这类方式能用于许多中合理布局中。
跨访问器适配性:
较为好的适用CSS3两列的访问器有Firefox、Safari、Google Chrome,这样大家就必须应用-moz和-webkit前缀了。
CSS3两列(宽度)
上面的截图是应用了下面的CSS3款式的实际效果:
#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}
访问器适用:
- Firefox(3.05 …)
- Google Chrome(1.0.154 …)
- Google Chrome(2.0.156 …)
- Internet Explorer(IE7, IE8 RC1 )
- Opera(9.6 …)
- Safari(3.2.1 windows…)
CSS3两列(列数)
上面的截图是应用了下面的CSS3款式的实际效果:
#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}
访问器适用:
- Firefox(3.05 …)
- Google Chrome(1.0.154 …)
- Google Chrome(2.0.156 …)
- Internet Explorer(IE7, IE8 RC1 )
- Opera(9.6 …)
- Safari(3.2.1 windows…)