1

大家好，在我的页面上：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 内，屏幕截图和名称位于浮动的左右跨度内。

4

4 回答 4

3

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

于 2013-04-08T20:59:07.553 回答
1

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

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

}
于 2013-04-08T21:18:52.083 回答
0

轻松修复：

.row > div {
    vertical-align: top;
}
于 2013-04-08T21:02:31.257 回答
0

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

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

更多其他选择vertical-align是：

在此处输入图像描述

在此处输入图像描述

于 2013-04-08T21:07:34.147 回答