我正在使用 CSS 制作列布局，并且进展顺利。令人惊讶的是，我的问题不是如何让专栏发挥作用；而是如何让专栏发挥作用。这就是功能。但我的专栏顶部却出现了一个令人毛骨悚然的神秘“填充”，它正在压低内容。我在这里准备了一个例子：

jsFiddle http://jsfiddle.net/ciel/VLGfn/

<div id="top"></div>
<div id="main">
    <div id="left">
        <div>menu items</div>
    </div>
    <div id="center">
        <h3>Not at the Top!</h3>
        
    </div>
    <div id="right">
        <header>Right Top</header>
        <article>Right Body</article>
    </div>
</div>

这是相关的 CSS：

#top {
    background-color: #25282b;
    height: 64px;
}
#main {
    width: 100%;
    display: table;
}
#left, #center, #right {
    display: table-cell;
    margin: 0px;
}
#left {
    width: 150px;
    background-color: rgba(38, 46, 51, 1);
    color: #7d8285;
}
#left div:first-child {
    padding-top: 10px;
}
#center {
    width: 228px;
    background-color: rgba(57, 65, 71, 1);
    color: #999ea1;
}
#center div:first-child {
    padding: 15px;
}
#center div:first-child h3 {
    color: #fff;
    margin-bottom: 2px;
}
#right {
    background-color: rgba(255, 255, 255, 1);
}
#right header {
    background-color: #3e7aa5;
    height: 92px;
}
#right article {
    padding: 10px;
    background-color: #fff;
}

我真的不确定是什么原因造成的。无论我指定的规则如何，第二列都会被直接向下推一点，然后第三列也会被向下推。

鉴于#right is a table-cell元素，你可以添加vertical-align:top为了解决这个问题。就其价值而言，这不是填充，这只是这些元素的渲染方式，因为默认行为是与默认值对齐baseline.

此处更新示例 http://jsfiddle.net/E3JD6/

#right {
    background-color: rgba(255, 255, 255, 1);
    vertical-align: top;
}