將 div 放置在文本的右側

Question

我有一個固定寬度的 div。 它有兩個孩子：

1. 第一個包含文本，
2. 第二個類似於“徽章”（只是一個寬度和高度固定的 div）。

所以我想實現這樣的目標：-

我希望第二個孩子位於第一個孩子的文本旁邊

我試圖通過向父級添加display: flex來解決這個問題，但問題是第一個子級的寬度超過了它的內容（下面代碼片段中的示例）

我嘗試將flex-basis: 0添加到第一個子項，但隨后每個單詞都以新行開頭，即使有足夠的地方在一行中顯示整個文本。

也許還有另一種解決方案？ 我試圖使用絕對定位的孩子來解決這個問題，但也失敗了。

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 1

您只能使用width作為min-content; 為您的文本元素。

例如：

width: min-content;

Answer 2

或許你可以嘗試用documentReady后的js代碼來解決！

document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'})

---

 document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'})

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 3

只需在右側文本中使用display: inline屬性。 並在父 div 中使用display: block屬性。

Answer 4

解決方案是添加“flex: 0 0 auto;” 關於“.first-child”。

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; flex: 0 0 auto; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong <br>teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 5

該解決方案使用了 HTML 內容的附加內容，它不適用於動態內容，但我還是會發布它——對於固定內容它有效：

如果您只是在長文本中的單詞之間添加一個換行符/ <br/>標記，它會執行您想要的操作（無需對您的代碼進行其他更改）：

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong<br/>teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 6

我希望這就是您要使第二個 div 位於右端的方法，您可以使用justify-content: space-between;

更新：我誤讀了這個問題，我已經對代碼進行了更改，並且它使用 CSS 按預期工作。

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; justify-content: flex-start; }.first-child { outline: 1px solid red; flex: .5; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>