CSS3实例教程(6):建立网站两列

2021-01-20 16:15 jianzhan

应用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…)