列出不同高度的项目

Question

我有一个显示在3列中的项目列表。这些物品具有各种高度，这导致它们的对准出现问题，从而导致大的间隙。我希望它们在垂直方向上相互紧密地显示出来。你可以在我的网站Matthew Grenier Consulting看到我在说什么。我希望“Bright Beginnings”项目直接位于“Yes We Do Coffee”项目的下方，并且在第一列中也是如此。有什么想法我怎么能用CSS做到这一点？我玩了几个小时没有运气。感谢。

Answer 1

只需将display: inline-block;与vertical-align: top;一起使用，而不是float: left;。

div.appico ul.sp-portfolio-items > li {
    background: transparent none repeat scroll 0% 0%;
    padding: 0px;
    margin: 0px;
    /* float: left;           remove this! */
    display: inline-block; /* use this     */
    vertical-align: top;   /* and this     */
}

另外，从float: left;移除div.appico .sp-portfolio-item，或者也替换它。

这是视觉效果：

如果你想让第四个盒子更接近第一个盒子，我建议你重新构造页面的这一部分，使盒子在彼此之下（使用三列）而不是在彼此的右边，或者你可以设置一个固定高度。

Answer 2

.sp-portfolio-item:nth-child(3n+1){
    clear:left
}