侧栏降到内容区域以下

Question

我正在尝试在内容区域的左侧和右侧添加侧边栏。可以here找到我当前正在处理的页面。您会注意到内容区域下方的右侧边栏（其中两次包含单词test）。我认为问题出在div class =“ section-inner”。无论我做什么，它总是会产生边距，我认为这是将边栏降至内容下方。以下是该部分的CSS和侧边栏。有人可以帮我，因为我没办法了。谢谢！

.section-inner {
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}

.sidebar {
    width: 10%;
}

.sidebar .widget:first-child {
    border-top: none;
}

.sidebar .widget {
    padding: 30px;
}

Answer 1

您可以使用此CSS代码段

.section-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.section-inner .content {
  width: 90%;
  float: left;
}

.section-inner .sidebar {
  width: 10%;
  float: left;
}

<div class="section-inner">
  <div class="content">
    content
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>

或使用flex

.section-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.section-inner .content {
  flex-basis: 90%;
}

.section-inner .sidebar {
  flex-basis: 10%;
}

<div class="section-inner">
  <div class="content">
    content
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>

Answer 2

您已将body.single .content的宽度设置为100％。取消该设置或将其设置为固定宽度将为右列留出空间。