javascript - 仅浮动图像 css

Question

没有这个链接可能javascript吗？我正在努力学习css和floating layouts。我在论坛和人们对该站点的链接上进行了搜索，即使这看起来是一个很好的解决方案，我也想扩大我在css和html.

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;
}

您还可以根据特定的媒体查询定义列数。例如，如果您想在视口大于 > 时显示 4 列960px

@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

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

Answer 2

工作小提琴

HTML：

<div class="parent">
    <div class="left-col">
        <div class="small"></div>
        <div class="medium"></div>
        <div class="large"></div>
        <div class="large"></div>
        <div class="medium"></div>
        <div class="small"></div>
    </div>
    <div class="right-col">
        <div class="large"></div>
        <div class="medium"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="medium"></div>
        <div class="large"></div>
    </div>
</div>

CSS：

.parent {
    width:400px;
    height:auto !important;
    background:yellow;
}
.left-col {
    max-width:200px;
    height:0 auto;
    width:200px;
    float:left;
    display:inline-block;
}
.right-col {
    max-width:200px;
    height:0 auto;
    width:200px;
    float:left;
    display:inline-block;
}
.small {
    width:190px;
    margin:10px;
    height:100px;
    background:green;
    display:block;
}
.medium {
    width:190px;
    margin:10px;
    height:200px;
    background:blue;
    display:block;
}
.large {
    width:190px;
    margin:10px;
    background:brown;
    height:400px;
    display:block;
}

Answer 3

这是可能的，但你必须有不同的列。如果您使用 display: inline-block 图像将无法正确对齐，并且如果您浮动它们，当一行中的第一个高于最后一个时，您将遇到问题。我把它弄乱了：

http://jsfiddle.net/VeecS/

一列html：

<div class="col">
    <h2>Column1</h2>
    <img src="http://placehold.it/300X150" />
    <img src="http://placehold.it/300X320" />
    <img src="http://placehold.it/300X120" />
</div>

CSS：

.col {
    width:24%;
    padding: 10px 0;
    background: #f1f1f1;
    float: left;
    margin-right: 1%;
}