css - 当要与元素重叠时如何使文本进入下一行

Question

所以我在 index.html 文件中有这样的东西

<div id = "quote">
quote text
</div>

<div id = "text">
text
</div>

我必须以这样的方式格式化它，使其看起来像这样

黑色背景的文本是 quote div 。

我一整天都在谷歌上搜索并尝试了一些想法，但无济于事。

稍后编辑:我无法将 quote div 放在 text 中。

我试过类似 this 的东西但无济于事

Answer 1

float 是您要查找的 CSS 属性。您可以在这里阅读更多相关信息 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

#quote {
  float: left;
}

举个例子

#quote {
  float: left;
  background: black;
  color: white;
  padding: 1em;
  margin: 0 1em 1em 0;
}

<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<div id="quote">quote</div>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>