將文本對齊到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;
}

在“左”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其他更多選項是：