【发布时间】：2017-04-18 21:28:30
【问题描述】：
我面前有一个非常有趣的问题。我觉得用codepen来说明会更好：
https://codepen.io/BooleT/pen/bWdPWe/
在类名中，ib 表示“inline-block”，iib 表示“inner inline block”。
我创建了一些数字来说明我想要实现的目标。在接下来的 3 段中，我将参考这张专辑中的图片：
所以有三个内联块，其中一个实际上是其他三个内联块的容器：
我想要达到的效果是在我调整窗口大小的时候让容器的内容换成2行：
但我只设法将整个容器本身包装到第二行：
真的有办法实现我想要的吗？我尝试在外部内联块之间添加 nbsp 并将 white-space: nowrap 添加到 body 元素（并将其覆盖到容器的 white-space: normal ），但都没有奏效。
我知道我可以通过添加媒体查询或 js 来解决它，当我减小屏幕宽度时，它们只会减小容器的宽度（或最大宽度），但这似乎不是解决方案。我什至不知道我的真实布局中每个块的宽度。
我会尽量保持开放的心态，因为解决这个问题可能需要更改页面的整个布局，但我确实认为有一个。
【问题讨论】：
-
@Santi，不，我想你不明白我在做什么。我希望容器与左侧的两个块对齐。但与此同时，如果屏幕上没有足够的宽度将它们渲染成一条，我希望它的内部内联块渲染成两行，甚至三行。相反，我让整个容器跳到下一行。
-
如果您可以使用 JavaScript，这应该不会太复杂。每次调整窗口大小时，您都可以将容器的大小调整为介于第三个外部块的可用宽度和最大内部块的宽度之间的任何值。
-
@11684 是的，我想过，但问题是我什至不知道容器内内容的实际宽度。当然，我可以使用相同的 javascript 来测量它，但是来吧...
-
你能用弹性盒子吗？
-
@BooleT 那有什么问题？元素的渲染宽度在
element.offsetWidth中很容易获得。