javascript - 强制元素具有相同的边界(单独的内联 block / float :left; clear:right doesn't work)

Question

我在下面有一个 fiddle ，其中一些元素使用内联 block 落在同一行，但并不总是相同的水平。每个谷歌都说简单使用内联 block 。我还跟着一个“ float :左；清晰:右；”例如，无济于事。

仍然失败的最令人惊讶的尝试是清除 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

我添加了垂直对齐，移除了 float ，将宽度设为 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%;
}