css3实现多列布局

发布于，归属于css3。 只剩下板凳啦！ 共有192人围观    


在css3中，你无须再使用float才能实现多列布局了，只要通过二个属性，就可以很方便的控制多列布局方式。

css代码非常简单：

  1. #container p {
  2.                 -webkit-column-count: 3;
  3.                 -webkit-column-gap: 10px;
  4.                
  5.                 -moz-column-count: 3;
  6.                 -moz-column-gap: 10px;
  7.                
  8.                 column-count: 3;
  9.                 column-gap: 10px;
  10.             }

分成3列，间隔为10像素，效果参见demo，请勿在IE下浏览。

有以下几个参数可配置

  • column-count 列数
  • column-gap 列间的间隔
  • column-width 自定义列的宽度
  • column-rule 列边框设置
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. 银月闪舞

    非常实用的一个东西，这样数据调用就不用skip了。期待css3的天下早日到来

同类