• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  利用css3 column属性制作正文

利用css3 column属性制作瀑布流效果

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-11-20 14:37
分享到:
css3 的 column列宽属性,简直就是为瀑布流而生,以往做瀑布流非常麻烦,这里推荐几款过去瀑布流做法:兼容IE6的纯div+css瀑布流效果瀑布流布局实现方法总结。但是无论哪种方法,都比较麻烦,而用column则非常简单:

1、html代码,这里的图片,高度都是不同的,这样更能看出瀑布流效果
<div class="wrap">
    <div class="item"><img src="images/1.jpg"><span>标题1</span></div>
    <div class="item"><img src="images/2.jpg"><span>标题2</span></div>
    <div class="item"><img src="images/3.jpg"><span>标题3</span></div>
    <div class="item"><img src="images/4.jpg"><span>标题4</span></div>
    <div class="item"><img src="images/5.jpg"><span>标题5</span></div>
    <div class="item"><img src="images/6.jpg"><span>标题6</span></div>
</div>
2、css代码,这里的css代码只写了瀑布流相关样式,其他的如颜色、边框等就不写了:
.wrap{column-count:3; }
.item{break-inside: avoid;}
注:column-count规定了一行显示几列,break-inside:avoid规定了子元素不能断裂,否则可能会出现图片和标题不在一列的现象

就这么简单,下面是效果图:



关于css3 column更详细的介绍可以参考:column css3 详解
(责任编辑:网页模板)
  • 本文标签:
  • css3 column
column css3 详解
css3 column多列瀑布流布局顶部不对齐