Question

我有一组嵌套的div显示为这样的表：

<div class="table">
    <div class="table-row">
        <div class="table-cell"><div class="just-a-box"><!--&nbsp;--></div></div>
        <div class="table-cell">Just some text</div>
    </div>
</div>

使用CSS实现表格显示。第一个单元格中的“just-a-box”div的样式如下：

.just-a-box {
    background-color: blue;
    height: 50px;
    width: 50px;
}

我的问题是，此框会影响第二列中文本的位置，除非我在HTML注释中指示框内添加“”。文本不再在单元格的顶部对齐。

我不明白为什么会这样。我正在寻找一种解决方案，使第二个细胞的内容完全独立于第一个细胞，因为我不想对第一个细胞的内容做出任何假设。这可能吗？

任何提示都表示赞赏！如果有人能够解释为什么细胞不会彼此独立，那将是非常棒的。这就是我所期望的。

有关问题的说明，请参阅http://jsfiddle.net/fMWQH/1/。

Answer 1

给'table-cell'类一个vertical-align：property - middle / top / bottom。

.table-cell
{
    display: table-cell;
    vertical-align: top;
}

<强>原因

真正的<td>元素本身就有一个vertical-align属性。

看到它正常工作：http://jsfiddle.net/fMWQH/6/

Answer 2

尝试将 vertical-align：top; 添加到 .table-cell 类

CSS

<style type='text/css'>
.table {
display: table;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
vertical-align: top;
}

.just-a-box {
background-color: blue;
height: 50px;
width: 50px;
}
</style>

HTML

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>
</div>

<hr/>

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>

jsfiddle example

Answer 3

表格单元格的默认垂直对齐方式为baseline。

示例中的空框没有内容，因此此框的基线是其底边。然后，另一个表格单元格中的文本将自己与此基线对齐。当您在蓝色框中添加一些文本时，基线会发生变化，使其看起来好像内容现在是顶部对齐的。

如其他答案中已提到的，您可以将所有单元格的垂直对齐方式更改为top，或者确保没有空单元格并保持baseline设置。

使表格单元格中的文本彼此独立

3 个答案: