将文字对齐的顶部

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; 

}