html - 类别页面设计问题

Question

我正在使用 maximus 主题。这是我的网站类别页面 Category 。我已经用一些 css tweeks 改变了布局。我得到了我想要的方式。但第三个 post itrem 与 left 对齐。然后接下来的两个显示再次正确，第三个向右显示。我知道这不是正确的方法..但暂时我想让它像这样工作 我不知道是什么问题。

这是我给的CSS

.category .span12 .row-fluid:nth-of-type(2),
.category .span12 .row-fluid:first-child {
    width:100% !important;
    float:left;
}

.category .span9 .row-fluid {
    width:47% !important;
    float:left;
    padding-left: 10px;
}

.category .blog-content {
    display:none;
}

请帮忙

Answer 1

您的内容 block 的高度不同。因为第一个 block 比第二个 block 大，所以看到右侧页面上有较早的空间。它将放置您的积木的位置。

您可以通过多种方式解决这个问题。

• 只需为所有积木指定一个标准高度即可。

例如:

.category .span9 .row-fluid {
    float: left;
    min-height: 195px;
    padding-left: 10px;
    width: 45% !important;
}

• 使用(类似 pinterest 的)砌体 javascript:http://masonry.desandro.com/
• 用 javascript 计算您的元素(每对)的高度。并给他们两个最大块的高度。

希望这能解决您的问题。