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列跨越垂直

回答

相关问题