css - 减小宽度时 div 内文本的新行

Question

我在下面有这段代码。如您所见，div 容器的 width 为 40%。当我减小宽度时，绿色的 div 下降，使 foobar's 保持在同一行。我希望单词 (foobar2, foobar3) 会出现在 foobar1 下面。为什么会出现这种行为？

这是 jsfiddle .

<div style="width: 40%; background-color: blue">
  <div style="display: inline-block; background-color: red">hello</div>
  <div style="display: inline-block; background-color: green">foobar1 foobar2 foobar3 </div>
</div>

Answer 1

就是inline-block的使用。为此，您最好使用 <span>元素(相当于将其设置为 display: inline )。

<div style="width: 40%; background-color: blue">
  <span style="background-color: red">hello</div>
  <span style="background-color: green">foobar1 foobar2 foobar3 </div>
</div>