如何使用CSS在柔性宽度设计中设置自动边距框？

Question

我有灵活宽度设置的DIV,例如最小宽度:800px和最大宽度:1400px.在这个DIV中,有许多框的固定宽度为200px并且显示:内联块.因此,根据父DIV宽度,这些框填充整个空间.

我的问题是右侧的空白区域是由父div的可变宽度引起的.有时这个空白区域很小并且看起来很好,但是父div的宽度不同,这个空白区域几乎是200px.

我不知道,如果我详细描述了我的问题,我希望这张照片有助于描述我的实际情况:

这就是我想要的:

使用TABLE可以轻松实现此自动边距.但是,我不知道确切的列数,因为它取决于用户的屏幕分辨率.所以我不能使用表而是坚持使用CSS.

任何人都知道如何解决这个问题？提前感谢您的意见和解答.

编辑:我不需要IE6的支持.我想支持IE7,但IE7是可选的,因为我知道有限制所以我可能会在IE7中使用固定宽度的"div.wrapper"

EDIT2我需要处理这些框的多行,因此它们不会超过"div.wrapper"框并正确地包装在多行框中,而不仅仅是在一条长行中.

EDIT3我不知道"列"的数量,因为这取决于用户的屏幕分辨率.所以在大屏幕上可以有一排7个盒子,而在小屏幕上,一排可能只有4个盒子.所以我需要的解决方案不会在一行中设置固定数量的方框.相反,当盒子不适合一行时,它们应该只包裹到下一行.

Answer 1

这与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
}

extra span(.stretch)可以替换为:after.

这仍然适用于与上述解决方案相同的所有浏览器.:after在IE6/7中不起作用,但distribute-all-lines无论如何它们都在使用,所以没关系.

请参阅: http ://jsfiddle.net/thirtydot/79mFr/2/

有一个小缺点:after:要使最后一行在Safari中完美运行,你必须小心HTML中的空白.

具体来说,这不起作用:

<div id="container">
    <div></div>
    <div></div>
</div>

这样做:

<div id="container">
    <div></div>
    <div></div></div>