Question

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

<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

因为你使用的是style =“display：inline-block;这会在同一行显示div。

Answer 2

这是使用内联块。为此，您最好使用<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>

Answer 3

这是因为foobar1，foobar2，foobar3在同一个div中。所以他们会在同一条线上。如果您这样做，您将获得所需的结果。

<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</div>
  <div style="display: inline-block; background-color: green">foobar2</div>
  <div style="display: inline-block; background-color: green">foobar3 </div>
</div>

<强> PS 即可。有更好的方法来做到这一点。我只是在修改你的问题，以帮助你更好地理解。

演示此FIDDLE

的小提琴

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

3 个答案: