Question

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

6 green blocks

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

我的理解是，这不能通过，例如，设置一个margin-right：10px对所有这些，并删除第3和第6个元素的边距，因为这些可能被拖到不同的位置，因此他们将不再是第3和第6位。

我不认为可以通过将每个部分添加到列div并在jQuery sortables设置中设置connectWith来完成，因为这个6的集合本身位于连接到其他列表的div中，我不认为无论如何，你可以拥有connect：'。。connectctedSortable，.column。

我也尝试使用伪类：nth-child（n）但是在拖动元素时无法正确更新边距：（

你可以在这里查看一个jsfiddle＆gt; 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个孩子，而是浮动和百分比的组合。这是我“修理”它的一种黑客方式：

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给每个第3个元素没有右边距并向右浮动，并缩小容器。这给出了你需要做的模糊近似。

然而，根据你的边距等，你将很难一直保持完美的一致性。在某些时候，会有数字四舍五入到最近的像素（浏览器最终渲染像素！）所以你的边距可以是一两个像素。

还有更多的工作可以使它更加一致，但我认为你不需要我无休止地调整它;我得到的印象你只是想知道“怎么了？”这样你就可以自己继续吧。 ; - ）

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

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%;
}

但是，有些奇怪的事情我无法解释：

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

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

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

2 个答案: