html – 如何使用CSS在灵活宽度设计中设置自动边框？

我有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>