css - 侧边栏低于内容区域

Question

我正在尝试在我的内容区域的左侧和右侧添加侧边栏。可以找到我当前正在处理的页面 here .您会注意到内容区域下方的右侧边栏(它有两次单词测试)。我认为问题在于 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>