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