强制元素具有相同的边界（inline-block alone/float:left; clear:right 不起作用）

Question

我下面有一个 fiddle，其中一些元素使用内联块，落在同一行，但并不总是相同的水平。每个 google 表示简单使用内联块。我也遵循了一个 "float:left; clear: right;" 的例子，但没有用。

仍然失败的最令人惊讶的尝试是在 django 模板中每隔三篇文章清除右侧的元素：

            {% if forloop.counter|divisibleby:3 %}
                <div style="clear:right;" class="article-link">
            {% else %}
                <div  class="article-link">
            {% endif %}

这导致：

我怎样才能使这些文章都从完全相同的级别开始，而不管框的大小？所以总是 3 在一条线上，在同一高度，然后换一条线，都在同一高度？谢谢

https://jsfiddle.net/codyc54321/ctp4n3og/

Answer 1

我添加了垂直对齐，删除了浮动，将宽度设为 30%。它适用于我的 FireFox。 jsfiddle

article {
    padding:10px;
    min-height: 190px;
    border: 1px groove #A17157;
}

.article-link{
    vertical-align: text-top;
    display:inline-block;
    margin:0 13px 14px 0;
    padding:0;
    cursor:pointer;
    width:30%;
}

强制元素具有相同的边界（inline-block alone/float:left; clear:right 不起作用）

forcing elements to the same level with equal borders (inline-block alone/float:left; clear:right doesn't work)

html

javascript

css

django

django-templates