CSS3列は垂直に広がります - php、html、css、css3

CSS3を使って写真の基本的な列レイアウトを作成します Columns,

問題は、このようにして、まずコンテンツを垂直方向に揃えてから、次の列に移動することです。

例えばこれを考えてみましょう： http://jsfiddle.net/LQEfK/1/

あなたが最初の2番目と3番目を見ることができるようにここに 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="/images/<?php bp_image_mid_url() ?>" alt="">
</div>
<?php endwhile; ?>
</div>

今度は私はこのphpをこのCSSと一直線に並べるために作り直したい。 3つの変数を保存するように while ループとそれぞれには、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="/images/". 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>