Question

我有一个三列布局，有时我想在一列中的文本与另一列中的图像相邻。我的问题是，当我将图像插入其中一列时，相邻列中的文本将其自身定位在相邻列中图像的底部附近，而不是像预期的那样位于列的顶部。

我的基本结构：

<div class="fwcol">
    <div class="col">
        <div class="ttl">
        <img src="images/placeholder.png" width="571" height="540">
        <p>Bla Bla Bla </p>
        </div><!--ttl-->
        <div class="otr">Column 2 Content
        </div><!--otr-->
    </div><!--col-->
</div><!--fwcol-->

CSS：

.fwcol {
    float: left;
    width: 966px;
}        
.ttl {
    display: table-cell;
    padding: 20px;
    width: 571px;
    background: #FFF;
}
.col {
    width: 966px;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px;
}

Answer 1

您没有对应用table-cell的div使用vertical-align：

.ttl {
    display: table-cell;
    vertical-align: top;
    padding: 20px;
    width: 571px;
    background: #FFF;
}

此外，在图像本身中，您需要使用垂直对齐：

.ttl img {
    display: inline-block;
    vertical-align: top;
}

Answer 2

这样做是因为.ttl display设置为table-cell。您可以向元素添加vertical-align: top以纠正此行为：

.ttl {
    display: table-cell;
    vertical-align: top;
    padding:20px;
    width: 571px;
    background: #FFF;
}

表格单元格图像和文本对齐方式

2 个答案: