Question

我面对一个奇怪的问题，我无法精确定位。我有一个3列布局，其中前两列已固定位置，因此只有第三列滚动。

每列的第一个元素的边距为20px（对于第一和第三列，它是H1元素，对于第二列，它是div）。出于某种原因，第三列不与前两列对齐。

<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的间隙（虽然没有任何边距定义），位置内的元素：固定列的边距为20px相对于container2 div（如预期的那样）。但是，第三列的屏幕顶部有20px的边距，而不是.container2 div。

任何人都知道我在这里失踪了什么？

Answer 1

为top: 0和.sidebar（fiddle）指定.menu。

.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

的文档

Answer 2

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

为什么这些栏目不排成一列？

2 个答案: