如何讓html元素像文本一樣流動

鑒于我有兩個（或更多）元素，ー讓我們使用，div但它們可以是span或任何東西......ー我希望第二個元素附加到第一個元素，就像文本中發生的那樣。

HTML：

<div>First element taking space</div> <div>Second element</div>

我想要的是：

//<------ 1. parent width big enough -------->
First element taking space Second element

//<---- 2. bit smaller width ------>
First element taking space Second
element

//<- 3. even smaller ->
First element taking
space Second element

會發生什么

//<------ 1. parent width big enough -------->
First element taking space Second element

//<---- 2. bit smaller width ------>
First element taking space          // even if there's space for the "Second" word in
Second element                      // the 1st line it starts in the next line

//<- 3. even smaller ->
First element taking      // even if there's space for the "Second element" full text
space                     // it starts in a new line
Second element

這可能是由于分配給每個元素的“盒子”，表現得像這樣

╔══════════════════════╗
║╔════════════════════╗║
║║First element taking║║
║║space               ║║
║╚════════════════════╝║
║╔══════════════╗      ║
║║Second element║      ║
║╚══════════════╝      ║
╚══════════════════════╝

我嘗試使用display選項 ( inline, inline-block, flex), white-space( wrap, pre-wrap) ......但不能讓它按我想要的方式作業。

注意：這pre-wrap是因為我也想保留空格。

編輯：使用當前代碼添加以下代碼段：

.root {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  background: pink;
}

.prefix {
  white-space: pre-wrap;
}

.text {
  white-space: pre-wrap;
}

.colored {
  background: red;
}

.big { width: 500px; }
.small { width: 320px; }
.smaller { width: 150px; }

<div class="root">
  <div class="prefix">1.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>
<hr/>
<div class="root small">
  <div class="prefix">2.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>
<hr/>
<div class="root smaller">
  <div class="prefix">3.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>

uj5u.com熱心網友回復：

我不知道我是否理解正確，但我認為 flexbox 可以解決您的問題，請看下面的代碼片段：

    .container{
        display:flex;
        justify-content: center;
        align-items: center;
        height:100vh;
        flex-direction: row;
    }
    .first-box{
        width:auto;
        height:auto;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: yellowgreen;
    }
    .second-box{
        width:auto;
        height:auto;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: tomato;
    }

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <div class="container">
    <div class="first-box">This is some text.</div>
    <div class="second-box">This is some text but in the second div which has a tomato background-color.</div>
    </div>

uj5u.com熱心網友回復：

解決方案非常簡單和愚蠢，讓我感到尷尬：只需使用行內元素。

也把它留在這里，以防任何人學習需要它......

.root {
  background: pink;
}

.prefix {
  display: inline; /* not needed if using native inline tags such as <span> */
  white-space: pre-wrap;
}

.text {
  display: inline; /* not needed if using native inline tags such as <span> */
  white-space: pre-wrap;
}

.colored {
  display: inline; /* not needed if using native inline tags such as <span> */
  background: red;
}

.big { width: 500px; }
.small { width: 320px; }
.smaller { width: 150px; }

<div class="root">
  <div class="prefix">1.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>
<hr/>
<div class="root small">
  <div class="prefix">2.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>
<hr/>
<div class="root smaller">
  <div class="prefix">3.&gt; </div>
  <div class="text">this is some text of arbitrary width </div>
  <div class="text colored">colored text</div>
  <div class="text"> more text</div>
</div>

標籤：css

上一篇：將jsonclick功能添加到htmlmenuitem下拉選單

下一篇：如何在用戶登錄時授予下載檔案的權限