CSS缩小到适合多线浮动div的容器div

Question

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

内容区域水平流动，内容区域中的白色框为浮动的左边div。这意味着他们都很好地坐在一起，并在没有剩余空间时流到一条新线路上。

但是，内容区域右侧通常有一个空白区域，没有足够空间存放另一个白色框。我想摆脱这一点;要么通过缩小整个容器div（#container_inner）来删除这个空间，要么使这个空间失败，使白框上方的蓝条合同（通过#content合同），以便右边与白框保持一致。

我已经尝试设置左侧区域（＃内容）嵌入块，但这是行不通的，因为里面的内容大于div宽度（因此溢出到多行）。

有什么办法可以实现，或者固定宽度的设计是我最好的选择吗？ PS：我希望我已经解释得很好。

Answer 1

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

Answer 2

您是否尝试将video_box设置为宽度的百分比？

这应该删除白色空间。记住也要将边距更改为百分比，否则宽度可能会开始超过100％+。

对于〔实施例：

.video_box { 
margin:1%; 

width:31% 
min-width:100px; 
height:370px; 

border-radius: 10px; 
-moz-border-radius: 10px; 

border: 1px solid #d0d0d0; 
background-color: #ffffff; 

float: left;