Css列不正确

Question

嗨，我想知道是否有更好的做法，因为它看起来不像我设置的方式。

这是我到目前为止所看到的，它看起来很糟糕，而且我使用的是列数，但它看起来并不正确，这是现在看起来像的形象。

当屏幕改变大小并且它看起来很丑并且不会留在3行中它会因为某种原因而成为第4行时会改变...这不应该超过广告所在的右侧而且它是不应该在底部切掉它，并在顶部有白色空间。我想让它看起来像pinterest，但我不确定在jquery中如何做到这一点我只需要这些就行了，而不是切断它所说的视图和待处理的地方。请帮忙谢谢！

这是我的css：

#gallerycontainer {

   -webkit-column-count: 3;
   -webkit-column-gap:   0px;
   -moz-column-count:    3;
   -moz-column-gap:      0px;
   column-count:         3;
   column-gap:           0px;
   column-fill: balance;
-moz-column-fill: balance;
-webkit-column-fill: balance;
   width: 840px;
    height:100%;

 position: relative;
}

#gallery li{
width: 265px;

}

#gallery li img {
  border: 5px solid #fff;
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
    max-width:250px;
    max-height:200px;
    padding:2px;

}
.galleryinfo{
     border: 2px solid #fff;
     padding-bottom: 40px;
     float: left;
     margin:9px;
     background: white;
     overflow: hidden;
     width: 100%;


}

这是带有php的html来显示图像。

<div id="gallery">
        <div class="galleryinfo">
        <li id="<?php print $id?>">
        <a class="fancybox" rel="group" href="photos/<?php print $picture?>"><img src="photos/<?php print $picture?>"/></a>

        Views : <?php print($unique) ?>
        <?php print($pending) ?>
        </li>
    </div>
<?php
}}
?>

非常感谢你们所有人的帮助！

Answer 1

使用<li>规则设置<a>或display:inline-block，不应再拆分超过2列。

如果浏览器了解此规则：column-break-inside: avoid;，则可以使用它来避免将一个框喷入2列。

Answer 2

好像你想拥有Pinterest风格。看看这个 - 它会帮助你： http://demosthenes.info/blog/825/Pinterest-Style-Column-Layout-In-Pure-CSS