Question

我有两列布局。由于我们希望支持的所有浏览器都不支持flex布局，因此我使用了display: table和display: table-cell。

我目前的问题是，如果我修改#sidebar > div > div的顶部填充，MAIN内容会受到影响，但不应该。所以有两个问题：

为什么MAIN会因更改#sidebar > div > div的顶部填充而受到影响？
我怎样才能实现它不受影响？

HTML

<div id="wrapper">
    <div id="sidebar">
        <div class="inner">
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
        </div>
    </div>
    <div id="content">
        <div class="inner">MAIN</div>
    </div>
</div>

CSS

body {
    background: #ecf0f1;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#wrapper {
    display: table;
}
#sidebar {
    display: table-cell;
    background: #2c3e50;
    color: #ecf0f1;
    width: 200px;
}
#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
}
.inner {
    min-height: 100vh;
    padding: 0px 10px;
}
#sidebar > div > div {
    padding: 5px;
    padding-top: 50px;
    margin: 1px 0;
}

jsFiddle - 只需修改那里的填充。

Answer 1

因为您没有为MAIN div指定vertical-align:top;。

#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
    vertical-align:top;
}

<强> jsFiddle example

默认的垂直对齐方式是基线，这是您最终看到的内容。

为什么一个单元格中元素的填充会影响另一个单元格？

1 个答案: