相关疑难解决方法(0)

我有一个流体宽度的容器DIV.

在这个我有4个DIV全部300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

我想要发生的是箱子1向左浮动,箱子4向右浮动,箱子2和3在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.

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

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

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

这就是我想要的:

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

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

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

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

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