如何分隔边栏和内容？

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

对侧边栏执行position:fixed而不是position:relative。这样可以防止文本进入侧边栏。 如果希望边栏占据父容器的整个宽度，则可以height: 100%。

我还建议您将样式和html分开。在<script></script>标记内或在另一个文件中。

Answer 2

删除position: fixed。此属性用于将元素放置在浏览器窗口上的特定位置，但是您没有提供任何支持它的位置属性。

如果要允许另一个div的内容环绕边栏，请在 sidebar 和 stuff div中添加display: inline-block CSS属性。

Answer 3

您可以在顶层使用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>