实现瀑布流有两种方法。HTML: div class="media-list waterfall" style="height: 100px;"
div class="media-image" img src="images/img-1.jpg" /div
div class="media-image" img src="images/img-2.jpg" /div
div class="media-image" img src="images/img-3.jpg" /div
div class="media-image"
display:inline-block是一种布局方法,它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以置身于inline水平的元素中。在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。 !DOCTYPE html
html
head
title
瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。具体步骤:1.设置外部容器多列列数(column-count)和列间距(column-gap)2.设置内容条目的break-inside属性为avoid,使条目总体不被打断。 div class="container" //最外层容器
div class="item" //条目
div class="item__content" //条目内容
img src=''
/div
/div