使用相等的边框强制元素到同一级别（单独内联块/浮点数：左;清除：右边不起作用）

Question

我在下面有一个小提琴，其中一些元素使用内联块落到同一行，但并不总是等于等级。每个谷歌都说简单使用内联块。我也跟着一个“浮动：离开;清楚：正确;”例如，无济于事。

仍然失败的最令人惊讶的尝试是在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%;
}