将 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>