php - CSS3 列垂直跨越

Question

我正在使用 CSS3 Columns 为照片制作基本的分栏布局，

问题是这样的话，它会先垂直对齐内容，然后再转到下一列

例如考虑这个:http://jsfiddle.net/LQEfK/1/

这里你可以看到第一个第二个和第三个 img 在第一个 column 中。 我找到了 -webkit-column-axis，它没有太多的文档并且仅由 Chrome 支持。

<div class="image-gallery main">
    <?php while ( bp_has_images() ) : bp_the_image(); ?>
        <div class="image-thumb-box">
            <img alt="<?php bp_gallplus_image_id() ?>" src="<?php bp_image_mid_url() ?>" alt="">
        </div>
    <?php endwhile; ?>
</div>

现在我想重新制作此 php 以与此 CSS 对齐。 就像在 while 循环中保存 3 个变量，每个变量都应该包含一个适合 css columns

的列

Answer 1

您的代码只针对基于 webkit 的浏览器...

试试这个

.image-gallery {
  -webkit-column-count: 3;
  -webkit-column-gap:   3px;  
  -moz-column-count:    3;
  -moz-column-gap:      3px;
  column-count:         3;
  column-gap:           3px;
}