我正在用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保持一致。类似于save，在while循环中生成3个变量，每个变量都应该包含一列，该列将适合css columns
您的代码只针对基于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;
}
以下是我所做的；
<div class="image-gallery main">
<?php
$key = 1;
$column_one = '';
$column_two = '';
$column_three = '';
?>
<?php while ( bp_gallplus_has_images() ) : bp_gallplus_the_image(); ?>
<?php
if($key == 1) {
$column_one .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key++;
} else if ($key == 2) {
$column_two .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key++;
} else {
$column_three .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key = 1;
}
?>
<?php endwhile; ?>
<?php echo $column_one . $column_two . $column_three; ?>
</div>