CSS3列跨越垂直

我正在做一個基本列布局與CSS3 Columns照片，CSS3列跨越垂直

的問題是，在這種方式，它會首先內容垂直對齊，並再轉到下一列

這裏你可以看到第一個第二個和第三個img在第一個column。我發現-webkit-column-axis這是沒有多少文件，並只支持鉻。

<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

來源

2013-12-16 CBeTJlu4ok

如果你*不*安排他們的列，他們將按照行從左到右排列（默認情況下，如果需要可以從右到左更改）。 –

什麼瀏覽器？你專門針對基於-webkit的。 –

ou對不起，我剛剛複製webkit，我現在會更新它，但那不是問題 @DavidThomas你是什麼意思？ – CBeTJlu4ok

這是我所做的;

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

來源

2013-12-16 23:30:00 CBeTJlu4ok

你的代碼只是針對基於瀏覽器-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; 
}

來源

2013-12-16 22:24:35

CSS3列跨越垂直

回答

相關問題