Question

首先，你必须看看情况。这是链接 - LINK。如您所见，侧边栏位于底部。我想要标题下方的侧边栏。当我打开一个帖子时它完美地工作，但不是在主页上。我尝试改变利润，但没有运气。我认为一个元素限制侧边栏位于顶部。谁能给我一个线索？

Answer 1

根据other answers about CSS horizontal aligning，您应该更改float元素的顺序，使它们成为第一个。 EJ。

<div id="main-wrapper">
    <div class="margin-1200">
        <div id="rsidebar-wrapper">...</div>
    </div>
</div>
<div id="content-wrapper">
    <div id="main-wrapper">
        <div class="margin-1200">...</div>
    </div>
</div>
<div id="main-wrapper">
    <div class="feature-posts">...</div>
</div>

此外，如果您能够负担得起时间和精力（以及额外的带宽），那么在页面中对齐事物的推荐方法是使用带有pure，bootstrap或{等网格系统的框架。 {3}}您可以在其中设置div样式：

<!-- Bootstrap 3 example, based on a 12 column grid -->
<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

让主要内容列覆盖页面的三分之二，然后使用侧边栏覆盖另外三分之一。

Answer 2

将您的结构更改为此 -

<div id="content-wrapper">
  <div id="main-wrapper">...</div>
</div>
<div id="rsidebar-wrapper">...</div>

将您的CSS改为此 -

.index #content-wrapper {
  margin: 0 auto;
  width: 1200px;
}

.index #main-wrapper {
  float: left;
  max-width: 767px;
}

如何检测元素是否抵抗另一个元素占据特定位置？

2 个答案: