0

我在下面有这段代码。如您所见width， div 容器的比例为 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>
4

3 回答 3

0

这是因为 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>

附言。有更好的方法来做到这一点。我只是在修改您的问题以帮助您更好地理解。

演示这个FIDDLE的小提琴

于 2013-08-12T15:44:58.637 回答
0

因为您使用的是 style="display: inline-block; 这会在同一行显示 div。

于 2013-08-12T15:37:19.143 回答
0

这是内联块的使用。为此，您最好使用一个<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>
于 2013-08-12T15:37:44.870 回答