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. Как сохранить сделать 3 переменные в while цикле и каждый из них должен содержать столбец, который будет правильным для CSS columns

Answer 1

Вот что я сделал;

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

Answer 2

код только цели -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; 
}