Question

我已经为WordPress创建了一个自定义页面模板，它以下列方式在内容区域中显示类别，子类别和帖子：

<div class="categories">
    <span class="categoryName">Category #1</span>
    <ul>
        <li class="subcategories">
            <span class="subcategoryName">Subcategory #1</span>
            <div class="posts">
                <span class="postName">
                    <a href="">Post #1</a>
                </span>
                <span class="postName">
                    <a href="">Post #2</a>
                </span>
            </div>
        </li>
        <li class="subcategories">
            <span class="subcategoryName">Subcategory #2</span>
            <div class="posts">
                <span class="postName">
                    <a href="">Post #3</a>
                </span>
                <span class="postName">
                    <a href="">Post #4</a>
                </span>
            </div>
        </li>
    </ul>
</div>

仅当用户点击子类别时才显示帖子，并在再次点击子类别时隐藏帖子：

jQuery(".subcategories").on("click", function() {
    if (jQuery(this).hasClass("hidePosts")) {
        jQuery(this).children("div").hide();
        jQuery(this).removeClass("hidePosts");
    } else {
        jQuery(this).children("div").show();
        jQuery(this).addClass("hidePosts");
    }
});

我遇到的问题我无法弄清楚它是如何显示类别div的。根据子类别的数量，它们具有不同的高度。此外，当显示特定子类别的帖子时，高度会变大。我将它们排列在以下三列中：

.categories {
    float: left;
    width: 46%;
    margin-top: 30px;
    margin-left: 2%;
    margin-right: 2%;
}

在印刷品屏幕上可以清楚地看到问题： http://i.imgur.com/z4vzwhX.jpg。我试图根据最大的类别设置最小高度但是当我显示帖子时它仍然看起来很混乱，因为高度越来越大。此外，我尝试使用jQuery计算上一个和下一个类别divs高度，当用户点击一个子类别并添加一个更大的填充，以便所有下面的类别div仍然在同一行但没有成功。我无法弄清楚现在尝试的是什么，所以任何指导都不过是受欢迎的。我希望我能够清楚地解释自己。

Answer 1

尝试在每隔三个块后使用一个明确的修复，这样可以防止您的布局在屏幕截图中显示出来。

值得一读http://css-tricks.com/snippets/css/clear-fix/

在三个对称列上排列不同的高度div

1 个答案: