1

我有一组嵌套的 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/。

4

3 回答 3

2

给“table-cell”类一个垂直对齐：属性-中间/顶部/底部。

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

原因

真正的<td>元素本身有一个垂直对齐属性。

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

于 2013-08-11T15:13:38.520 回答
1

尝试添加垂直对齐：顶部；到你的.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 示例

于 2013-08-11T15:24:26.780 回答
1

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

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

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

于 2013-08-11T15:59:08.217 回答