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

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>