可排序的 jQuery UI div 与它们之间的间距对齐

Question

这就是问题所在，我有 6 个 div 使用 jQuery UI sortable。它们的排列如下图所示。

图像是我正在寻找的布局，每个 div 之间的间距相等，但最后的 div 靠在容器的边缘。

我的理解是，这不能通过例如在所有元素上设置 margin-right:10px 并删除第 3 和第 6 个元素的边距来完成，因为这些元素可能会被拖动到不同的位置，因此它们将不再处于第 3 和第 6 位。

我认为这不能通过将每个部分添加到列 div 并在 jQuery sortables 设置中设置 connectWith 来完成，因为这组 6 个本身位于连接到其他列表的 div 中，我不认为无论如何，您都可以使用 connectWith: '.connectedSortable, .column'。

我也尝试过使用伪类 :nth-child(n) 但在拖动元素时无法正确更新边距:(

你可以在这里查看一个 jsfiddle > http://jsfiddle.net/hC5Qy/1/

框的宽度当前设置为 32%，我的想法是我可以在其中两个框上设置 2% 的左右边距以提供 100% (32 + 32 + 32 + 2 + 2 = 100) .

有什么想法吗？

有没有 JavaScript 方法可以做到这一点？任何新的 CSS3 或 HTML5 布局可用于使中间框居中？ （我不担心旧浏览器的兼容性）。

非常感谢任何帮助！

谢谢

[编辑：小提琴中的一些代码]

HTML：

<div id="area1" class="connectedSortable">       
    <div class="block"><span style="font-size:3em; color:#CCC;">1</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">2</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">3</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">4</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">5</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">6</span></div>       
</div>

JS：

$(function() {
    $(".connectedSortable ").sortable({
        connectWith: ".connectedSortable"
    });

    $(".connectedSortable").disableSelection();
});

CSS：

#area1, #area2 {
 border:1px solid red;
 float:left;
 width:680px;
 margin-bottom:15px;
 background:#ccc;
}

.block {
    background:green;
    width:32%;
    height:200px;
    float:left;
    margin-right:1%;
    margin-top:10px;
}

Answer 1

（已删除之前的帖子）：

这不是第 n 个孩子，它是浮点数和百分比的组合。这是我“修复”它的一个 hacky 方式：

http://jsfiddle.net/hC5Qy/5/

#area1, #area2 {
 border:1px solid red;
 float:left;
 width:680px;
 margin-bottom:15px;
 background:#ccc;
}

.block:nth-child(3n+3) { 
    margin-right: 0 ; // get rid of extra margin 
    float: right; // floating it right ensures no gap on right if rounding changes gutters
}

.block {
    background:green;
    width:32%; // 3 of these = 96%
    float: left;
    height:200px;
    margin-right:2%; // 2 of these = 4% for a total of 100%
    margin-top:10px;
}

使用 nth-child 使每个第三个元素没有右边距并向右浮动，并使容器变窄。这给出了您需要做什么的模糊近似值。

但是，如果您的利润率等基于百分比，您将很难始终保持完美一致。在某些时候，数字会四舍五入到最接近的像素（浏览器最终会在像素上渲染！）因此您的边距可能会相差一两个像素。

可以做更多的工作来使其更加一致，但我认为您不需要我无休止地调整它；我的印象是你只想知道“怎么了？”这样您就可以自己继续进行。 ;-)

对于我的两分钱，我不会使用浮点数，而是依靠 display: inline-block。 IE7 及更低版本不支持内联块，尽管有一些黑客可以伪造它。如果 IE6 和 7 对项目不重要，我会使用 inline-block 重构布局。

Answer 2

编辑：哎呀，我忽略了你已经尝试过这个。但是，当你移动积木时，它似乎工作正常？

您可以使用 CSS3 属性 nth-child：

.block:nth-child(3n+1) { /* 1st, 4th, 7th, ... element */
    margin-left:1%;
}
.block:nth-child(3n+3) { /* 3rd, 6th, 9th, ... element */
    margin-right:1%;
}

但是，发生了一些我无法解释的奇怪事情：

• 它与 680 像素的宽度不完全对齐 - 但它与 700 像素的宽度对齐 - 我不知道为什么...（在 Chrome 中，Firefox 也可以在 680 处正常工作）

http://jsfiddle.net/hC5Qy/2/