让我的 div 环绕另一个 div？

Question

div.sidebar {
  float: left;
  margin-left: 35px;
  margin-top: 20px;
  margin-bottom: 5px;
  width: 350px;
  padding: 20px;
  background-color: #667A56;
  border-style: solid;
  border-radius: 3px;
  border-color: #47553C;
  border-width: 5px;
  clear: left;
}
img.side {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: 350px;
  margin-top: 5px;
}
div.content {
  margin-top: 30px;
  margin-left: 465px;
  margin-right: 35px;
  background-color: #667A56;
  border-style: solid;
  border-radius: 3px;
  border-color: #47553C;
  border-width: 5px;
  padding: 20px;
  padding-bottom: 10px;
}

<!---Sidebar--->
<div class=sidebar>

  <h2>
Header
</h2>


  <ul>

    links

  </ul>

</div>



<div class=sidebar>

  <h2>
Header
</h2>
  <img class=side>an image

</div>

<!--- Main Content --->

<div class=content>

  <h2 class=contentheader> 
header
</h2>

  <p class=content>
    contenttext
  </p>

  <p class=content>
    contenttext
  </p>
</div>

<div class=content>

  <h2 class=contentheader>
header
</h2>

  <p class=content>
    content text
  </p>

  <p class=content>
    content text
  </p>


</div>

所以，这是我的网站。

我有页眉和页脚等等，但这并不是特别重要。我只是想弄清楚如何让第二个内容 div 环绕底部边栏，这样我制作后面的页面时生活会更轻松。

如果需要站点编码，我也可以提供。谢谢！

Answer 1

没有代码很难给出具体的建议，但是你可以像这样将 div 相互嵌套：

<div id="content">
    <div id="sidebar">
        <p>Whatever you want inside your div goes here...<\p>
    <\div>
<\div>

您将需要使用 css 添加样式以获得您想要的确切布局

Answer 2

你这样做可以吗:?

请注意，不可能让元素具有草图中的边框，您必须使用乘法元素来实现这一技巧。

.sidebar {
  padding: 50px 100px;
  border: 1px solid black;
}

<div style="float: left; width: 40%">
  <div class="sidebar">sidebar</div>
  <div class="sidebar">sidebar</div>
</div>
<div style="float: left; width: 59%; border: 1px solid black; height: 200px;">Main Content Bar Thing</div>

<div style="display: inline;">asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </div>

让我的 div 环绕另一个 div？

Make my div wrap around another div?

html

css

word-wrap