我有DIV具有灵活的宽度设置,例如最小宽度：800像素和最大宽度：1400像素.在这个DIV中,有许多固定宽度为200px的框,并显示：inline-block.因此,根据父DIV宽度,这些框填充整个空间.
我的问题是右侧的空格是由父div的宽度变化引起的.有时候这个空格很小,看起来不错,但是父div的宽度不一样,这个空格差不多是200px.
我不知道,如果我详细描述了我的问题,我希望这张照片将有助于描述我的实际情况：
这就是我想要的：
通过使用TABLE可以轻松实现这个自动边距.但是,我不知道确切的列数,因为它取决于用户的屏幕分辨率.所以我不能使用表,而是坚持使用CSS.
任何人都有一个想法如何解决这个问题？提前感谢您的意见和答案.
编辑：我不需要IE6的支持.我想支持IE7,但IE7是可选的,因为我知道有限制,所以我可能会在IE7中使用固定宽度的“div.wrapper”
EDIT2我需要处理这些框的多行,所以它们不会超过“div.wrapper”框,并且正确地包装在多行框中,而不仅仅是在一个长行中.
EDIT3我不知道“列”的数量,因为这是非常可变的,这取决于用户的屏幕分辨率.所以在大屏幕上,一排可能有7个盒子,在小屏幕上可能只有4个盒子在一排.所以我需要解决方案,它不会在一行中设置固定数量的框.相反,当这些框不适合一行时,它们应该包装到下一行.
解决方法
这与IE7兼容的CSS可以得到：
http://jsfiddle.net/thirtydot/79mFr/
如果这还是不正确的话,现在是时候看看使用JavaScript,希望还有jQuery.如果您正确地定义了您的需求,那么使用JavaScript来完成这个任务应该是微不足道的.
HTML：
<div id="container">
<div></div>
<div></div>
..
<span class="stretch"></span>
</div>
CSS：
#container {
border: 2px dashed #444;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 800px;
max-width: 1400px
}
#container > div {
margin-top: 16px;
border: 1px dashed #f0f;
width: 200px;
height: 200px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
额外的跨度(.stretch)可以替换为：after.
这仍然适用于与上述解决方案相同的浏览器. ：在IE6 / 7之后不行,但是他们使用的是全线,所以没关系.
见：http://jsfiddle.net/thirtydot/79mFr/2/
有一个很小的缺点：之后：要使Safari的最后一行工作完美,您必须小心HTML中的空格.
具体来说,这不行：
<div id="container">
<div></div>
<div></div>
</div>
这样做：
<div id="container">
<div></div>
<div></div></div>
