为什么这些列不对齐？答案

【问题标题】：Why don't these columns line up?为什么这些列不对齐？
【发布时间】：2014-12-19 12:53:06
【问题描述】：

我遇到了一个我无法确定的奇怪问题。我有一个 3 列布局，其中前 2 列位置固定，因此只有第三列滚动。

每列的第一个元素的上边距为 20px（第一和第三列是 H1 元素，第二列是 div）。由于某种原因，第三列与前 2 列不一致。

<body>
    <div class="wrapper">
        <div class="container2">
            <div class="sidebar">
                <h1>Sidebar</h1>
            </div>
            <div class="menu">
                <div class="mediablock">
                    Media here</div>
            </div>
            <div class="content">
                <h1>Content goes here</h1>
            </div>
        </div>
    </div>
</body>

我在 jsfiddle 有一个简单的版本，用来演示问题。

http://jsfiddle.net/59ez7zmy/

我只能假设固定位置与它有关，但我似乎无法弄清楚。

当我使用 Chrome 开发人员工具栏时，页面顶部和 div 之间有（大约）20px 的间隙（尽管没有由任何边距定义），并且 position: fixed 列内的元素有 20px 的边距相对于 container2 div（如预期的那样）。然而，第三列距屏幕顶部有 20px 的边距，而不是 .container2 div。

有人知道我在这里缺少什么吗？

【问题讨论】：

位置固定意味着这些对象在您滚动时不会移动，如果这不是您想要的，您可能需要找到替代解决方案。
这就是我想要完成的。 .sidebar 和 .menu 不应滚动，只有 .content。

标签： css css-position multiple-columns

【解决方案1】：

为.sidebar 和.menu (fiddle) 指定top: 0。

.sidebar {
    position: fixed;
    width: 100px;
    height: 100%;
    color: rgb(97, 68, 50);
    text-align: right;
    top: 0;
}
.menu {
    position: fixed;
    width: 250px;
    margin-left: 110px;
    height: 100%;
    color: rgb(97, 68, 50);
    top: 0;
}

_{查看top的文档}

【讨论】：

更新了您的 JSFiddle 以反映右栏滚动的要求...jsfiddle.net/MathiasaurusRex/59ez7zmy/3
完美，有效！我知道它必须是一些简单的东西，只是不能把我的手指放在它上面。谢谢！

【解决方案2】：

一种解决方案是在.content 类上添加position: fixed：

h1 {
  font-size: 1em;
  margin-top: 20px;
}
.sidebar {
  position: fixed;
  width: 100px;
  height: 100%;
  color: rgb(97, 68, 50);
  text-align: right;
}
.menu {
  position: fixed;
  width: 250px;
  margin-left: 110px;
  height: 100%;
  color: rgb(97, 68, 50);
}
.content {
  margin-left: 370px;
  width: 150px;
  position: fixed;
}
.mediablock {
  margin-top: 20px;
}
.wrapper {
  position: relative;
  text-align: center;
}
.container2 {
  width: 550;
  margin-left: auto;
  margin-right: auto;
}

<body>
  <div class="wrapper">
    <div class="container2">
      <div class="sidebar">
        <h1>Sidebar</h1>
      </div>
      <div class="menu">
        <div class="mediablock">
          Media here</div>
      </div>
      <div class="content">
        <h1>Content goes here</h1>
      </div>
    </div>
  </div>
</body>

此外，如果您不想使用position: fixed，您也可以在.content 类中使用display: inline-block：

h1 {
    font-size: 1em;
    margin-top: 20px;
}
.sidebar {
    position: fixed;
    width: 100px;
    height: 100%;
    color: rgb(97, 68, 50);
    text-align: right;
}
.menu {
    position: fixed;
    width: 250px;
    margin-left: 110px;
    height: 100%;
    color: rgb(97, 68, 50);
}
.content {
    width: 150px;
    position: relative;
    display: inline-block;
}
.mediablock {
    margin-top: 20px;
}
.wrapper {
    position: relative;
    text-align: center;
}
.container2 {
    width: 550;
    margin-left: auto;
    margin-right: auto;
}

<body>
    <div class="wrapper">
        <div class="container2">
            <div class="sidebar">
                 <h1>Sidebar</h1>

            </div>
            <div class="menu">
                <div class="mediablock">Media here</div>
            </div>
            <div class="content">
                 <h1>Content goes here</h1>

            </div>
        </div>
    </div>
</body>

你的 css 中有一些错误，我修复它们。

【讨论】：

我相信 OP 的意图是不固定 content 窗格。 content 滚动时，左侧两列应保持固定。
确实，第三列应该可以滚动，因为这将包含页面文本的主要内容。