Question

看看这个小提琴：

    .tbl {
        display: table;
        width:"100%";
    }
    .trow {
        display:table-row;
    }
    .ul {
        white-space: nowrap;
    }
    .col {
        display:table-cell;
    }
    .col1 {
        background:#77c;
    }
    .col2 {
        background: #faa;
    }
    .col3 {
        background: #afa;
        vertical-align: top;
    }
    .inside {
        display:inline-block;
        /* change this to block */
    }

<div class="tbl">
        <div class="trow">
            <div class="col1">
                <div class="inside">
                    <ul>
                        <li>INSIDE ONE</li>
                        <li>INSIDE ONE</li>
                    </ul>
                </div>
            </div>
            <div class="col2">COLUMN TWO</div>
        </div>
    </div>

Div有显示表，表格行和表格单元格。

当我设置.inside以显示：inline-block时，以下单元格的行为就像vertical-align：bottom一样。我可以通过设置vertical-align：top覆盖它，但我只是想知道为什么在一个单元格中放置带有内联块的div会改变另一个单元格的属性？

Answer 1

试试DEMO

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

Answer 2

根据CSS specifications（我的重点）：

vertical-align属性会影响框内线框内的垂直位置由 内联级 元素生成。

如果将第一个单元格的内容设置为block，则它不再是内联元素。因此，vertical-align属性将不起作用，第二个单元格的内容将以其默认位置结束（与单元格的顶部对齐）。

为什么显示：表格单元格内的内联块会更改后续单元格的垂直对齐方式

2 个答案: