将文本对齐到div的顶部

Question

大家好，我的页面在这里：http://www.gamingonlinux.com/sales/我想将添加的，价格，储蓄和提供商中的文字对齐到顶部，我该怎么做呢？

以下是列的html：

<div class="row">
    <div class="left">
        {:screenshot} {:info}
    </div>
    <div class="date-column">
        {:date}
    </div>
    <div class="price-column">
        {:price}
    </div>
    <div class="middle">
        {:savings}
    </div>
    <div class="right">
        {:provider}
    </div>
</div>

他们的css：

.left
{
    display: table-cell;
    padding: 14px;
}

.price-column
{
    display: table-cell;
    padding: 14px;
    width: 150px;
}

.date-column
{
    display: table-cell;
    padding: 14px;
    width: 150px;
}

.middle
{
    display: table-cell;
    width: 75px;
    padding: 14px;
}

.right
{
    display: table-cell;
    width: 155px;
    padding: 14px;
}

在“left”div中，屏幕截图和名称位于左右浮动范围内。

Answer 1

就像常规表格单元格一样，您可以使用vertical-align:top;进行对齐。

Answer 2

你只需要添加float：left;你的css（.left类）就像这样

.left
{
    display: table-cell;
    padding: 14px;
    float: left;

}

Answer 3

轻松修复：

.row > div {
    vertical-align: top;
}

Answer 4

如果我理解您的问题，请尝试使用此代码。 vertical-align是不错的选择：

display: table-cell;
padding: 10px;
width: 150px;
text-align: center;
vertical-align: top;

vertical-align的其他更多选项是：