使 div 继续到新行而不是跳到新行 [重复]

【问题标题】：Make div to continue to new line not jumping to new line [duplicate]使 div 继续到新行而不是跳到新行 [重复]
【发布时间】：2021-04-28 05:40:11
【问题描述】：

我有 3 个 div，我想将它们并排放置，但如果每个 div 中的文本很长，请将文本换成新行并保留下一个 div。

<div style="float: left;">this is a text</div>
<div style="float: left; text-decoration: underline;">Will continue in next div</div>
<div style="float: left;">and this will be beside that</div>

我想在上面显示这样的 div（第二个 div 应该有下划线）

this is a text that will continue
in next div and this will be beside
that

【问题讨论】：

我没有得到你描述的输出。正如预期的那样，这些元素水平地相邻，而不是垂直地相邻。请说明您的预期结果。
@connexo 抱歉，我编辑了我的问题以使其清楚。这就是我想要得到的。
现在您在代码上方的描述与您在代码下方的期望相互矛盾。

标签： html css

【解决方案1】：

默认情况下，div 元素的display 属性值为block，这会将其放置在文档中自己的行中。如果您希望它们并排，您可以将值设置为inline 或inline-block（如果您想设置宽度/高度）。

div {
  font-size: 4rem;
  display: inline;
}

#second {
  text-decoration: underline;
}

<div>This text is in the first div element and</div>
<div id="second">continues into the second div element and</div>
<div>finishes in the third div element.</div>

如果您只需要在第二个div 中为文本添加下划线，那么我建议您使用span 来避免从divs 中删除样式并记住将它们从任何未来的 CSS 选择器中排除。

div {
  font-size: 4rem;
}

.underline-me {
  text-decoration: underline;
}

&lt;div&gt;This text is all in one div element &lt;span class="underline-me"&gt;even though this part is underlined&lt;/span&gt; so it will flow without needing to change the display property&lt;/div&gt;

【讨论】：