相关疑难解决方法(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(想想某种带有文章图片的目录视图).现在我想向他们展示类似于float:left的行为.这样可以确保浏览器窗口越大,一行中显示的div就越多.

浮动的缺点:左边的解决方案是,右侧有一个很大的白色间隙,直到另一个div适合.现在我的工作是在页面上均匀地分配div,而不是右侧的大白色间隙,单个div之间应该有均匀分布的间隙.

JavaScript中的解决方案很简单:http://dl.dropbox.com/u/2719942/css/columns.html

您可以看到,如果您调整浏览器窗口的大小,它的行为类似于float:left,但空间均匀分布在框之间.使用JavaScript动态计算列数和行数:

  function updateLayout() {
    var boxes = document.getElementsByClassName('box');
    var boxWidth = boxes[0].clientWidth;
    var boxHeight = boxes[0].clientHeight;
    var parentWidth = boxes[0].parentElement.clientWidth;

    // Calculate how many boxes can fit into one row
    var columns = Math.floor(parentWidth / boxWidth);

    // Calculate the space to distribute the boxes evenly
    var space = (parentWidth - (boxWidth * columns)) / columns;

    // Now let's reorder the boxes to their new positions
    var col = 0;
    var row = 0;
    for …