想要在css里实现多列,就需要定义:

  1. columns-count:n  // 实现n列多列
  2. column-gap: n px  // 实现多列间的间隙大小 (注意没有s)
  3. column-rule:n px(间隔线宽度) outset…(间隔线类型) color(各种颜色)

一、代码实现

(1)文字实现

实现效果:

233

(2)图片实现

下面实现照片墙的瀑布流效果:

实现效果:

233

因为图片的规格相差比较多,所以瀑布流的实现效果不是很美观…

二、总结

实际应用的时候需要根据图片的规格设置比例,才会有比较好的效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注