javascript - 仅 float 图像 css

Question

<分区>

Answer 1

使用 CSS3 Columns您可以在现代浏览器上轻松获得相同的结果:

示例 jsbin:http://jsbin.com/ivumoq/1/edit

相关CSS

body > div {
   -webkit-column-count:3; 
   -webkit-column-width:200px;
   -moz-column-count:3; 
   -moz-column-width:200px
   column-count:3; 
   column-width:200px;
}

您还可以根据特定的媒体查询定义列数。例如。如果你想在视口(viewport)大于 > 960px

时显示 4 列

@media all and (min-width:960px) {
    body > div {
        -webkit-column-count:4; 
        -moz-column-count:4; 
        column-count:4;
    } 
}

因此您可以在浏览器调整大小时模拟砌体回流。

媒体查询示例:http://jsbin.com/ivumoq/2/edit

否则，使用 float 您需要定义三个 float 容器(作为三个独立的列)并在每个容器上放置大约 1/3 的图像。