html - テキストを 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

float: left; を追加するだけです。このようなCSS（.leftクラス）に

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

}

Answer 2

簡単な修正:

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

Answer 3

あなたの問題を理解したら、このコードを試してください。vertical-align良い選択です:

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

その他のオプションvertical-alignは次のとおりです。