html - 围绕多行 float div 的 CSS 收缩以适合容器 div

Question

我已经开始为我的视频流网站编写设计。 http://www.xjerk.com/new.site/ [SFW]

内容区域是水平流动的，内容区域的白框是向左浮动的div。这意味着它们都很好地坐在一起，并在没有剩余空间时流到新的一行。

但是，内容区域通常在右侧有一个空白区域，没有足够的空间放置另一个白框。我想摆脱这个；要么通过缩小整个容器 div (#container_inner) 以删除此空间，要么失败，使白框上方的蓝色条收缩(通过#content 收缩)，使右边缘与白框对齐。

我试过将左侧区域 (#content) 设置为内联 block ，但这不起作用，因为里面的内容大于 div 宽度(因此溢出到多行)。

有什么方法可以实现，还是固定宽度的设计是我最好的选择？

PS:我希望我已经解释得足够好。

Answer 1

使用媒体查询为蓝条大小设置断点。