html - 如何分离侧边栏和内容？

Question

我正在尝试制作一个侧边栏和一个内容 div，但我不知道如何将它们分开，而且内容位于侧边栏下方，显然我不希望这样。我对编码还很陌生，所以我不知道该怎么做，也不知道是否有更好的方法。

这是代码:

<div id="content" style="margin:50px; background-color:blue; padding:10px;">
   <div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
      <p>h</p>
   </div>
   <div id="stuff" style="background-color:orange; margin:20px;">
      <p>Lorem ipsum blah blah</p>
   </div>
</div>

Answer 1

您可以在顶层使用display: flex。它比 position: fixed 或任何其他定位策略更易于使用。

#content {
  margin: 20px 0;
  padding: 10px;
  background: blue;
  display: flex;
}

#content #sidebar {
  background: red;
  width: 150px;
  border: 2px solid lime;
  padding: 10px;
}

#content #stuff {
  background-color: orange;
  flex: 1;
  margin-left: 10px;
  padding: 10px;
}

<div id="content">
  <div id="sidebar" style="">
    <p>h</p>
  </div>
  <div id="stuff" style="">
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
    <p>Lorem ipsum blah blah</p>
  </div>
</div>