css - CSS 框图像 - 布局问题

Question

我在使用 css 布局对象时遇到困难，

由于代表无法发布图像，因此图像托管在这里....

用于每个带有 div 标记的图像的 css ive 如下

#compbox img {
  float:left;
   margin:5px;
}
#compwinnerbox img {
  float:left;
  margin:5px;
}

等等，每个盒子，虽然我将如何让底行的第三个盒子填补空白 - 所以在某种意义上浮动？对不起，如果我解释得不好。

Answer 1

鉴于浮动的规范，使用 CSS 和您的布局您无法做到这一点：

5 - 浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。

Answer 2

要么使用 jQuery Masonry： http: //masonry.desandro.com/

或者对于 CSS 方法使用column

.col {
 -moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:10px;
-moz-column-gap:10px; /* Firefox */
-webkit-column-gap:10px; /* Safari and Chrome */
column-gap:2;
}

http://jsfiddle.net/4gXCs/3/