將文字對齊的頂部

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; 
} 

「左」分區的截圖並命名在裏面飄來左右的跨度。

Answer 1

就像在常規表單元格上一樣，您可以使用vertical-align:top;來進行對齊。

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是：

Answer 4

你只需要添加浮動：左;到你的css（.left類）這樣的

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

}