CSS：补充工具栏不会出现在父元素中

Question

我试图在中间元素的两个边缘添加两个侧边栏。左边的一个没有问题，但是，正确的一个没有问题。相反，它出现在其父元素下方（如图所示），除非我将其定位为绝对值，然后它会越过导航栏。

相关的css：

/* The parent element */
main {
    margin: 0;
    position: relative;
    left: 22%;
    right: 22%;
    width: 56%;
    height: 50vh;
    background-color: #c5c5c5;
}

/* The correctly shown sidebar */
.sidenav {
    margin: 0;
    height: 100%;
    width: 160px;
    top: 7%;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 7%;
}

/* The wrongly shown sidebar */
.bar-right{
    float: right;
    margin: 0;
    width: 200px;
    height: 100%;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 7%;
}

HTML：

  <main>
    <div class="topbar">
      [top bar stuff]
    </div>
    <div class="sidenav">
      <a href="[url]" class="userheader">[usernamestuff]</a>
      <a href="[url]">Link1</a>
      <a href="[url]">Link2</a>
      <a href="[url]">Link3</a>
    </div>
    <div class="bar-right">
      <p>text for test</p>
    </div>
  </main>

两个侧边栏实际上是相同的，所以我不明白为什么它们的行为如此不同。如何将它们都放到主元素的适当边缘？

Answer 1

我建议你使用Bootstrap。通过以下代码，这将帮助您轻松实现所需的目标：

<div class="container">
   <div class="row">
      <div class="col-sm-3">
      // First sidebar
      </div>
      <div class="col-offset-6 col-sm-3">
      // Second sidebar
      </div>
   </div>
</div>