Question

我正在使用CSS3 Columns，

为照片制作基本列布局

问题在于，通过这种方式，它将首先垂直对齐内容，然后转到下一列

此处您可以看到第一个第二个和第三个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

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

试试这个

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

Answer 2

这就是我所做的;

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

CSS3列垂直跨越

2 个答案: