如何使文本去下一行，當即將在<code>index.html</code>文件</p> <pre><code><div id = "quote"> quote text </div> <div id = "text"> text </div> </code></pre> <p>重疊元素

Question

所以我有這樣的事情，我必須將它以這樣一種方式，它看起來會格式化像這樣

帶黑色背景的文字是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>