可排序的jQuery UI div与它们之间的间距对齐
所以这是问题，我有6个使用jQuery UI排序的 div。 它们的排列如下图所示。
图像是我正在寻找的布局，每个div之间的间距相等，但最后的那些对着容器的边缘。
我的理解是，这不能通过，例如，设置一个margin-right：10px对所有这些，并删除第3和第6个元素的边距，因为这些可能被拖到不同的位置，因此他们将不再处于第3和第6位。
我不认为可以通过将每个部分添加到列div并在jQuery sortables设置中设置connectWith来完成，因为这个6的集合本身位于连接到其他列表的div中，我不认为你可以拥有connectWith：’。。connectctedSortable，.column’无论如何。
我也尝试使用伪类：nth-child（n）但是在拖动元素时无法正确更新边距:(
你可以在这里查看一个jsfiddle> http://jsfiddle.net/hC5Qy/1/
盒子的宽度目前设定为32％，我的想法是我可以在两个盒子上设置2％的右/左边距给出100％（32 + 32 + 32 + 2 + 2 = 100）。
那么任何想法？
有没有JavaScript方法这样做？ 任何新的CSS3或HTML5布局都可用于居中中盒？ （我不担心旧的浏览器兼容性）。
任何帮助是极大的赞赏！
谢谢
[编辑：来自小提琴的一些代码]
HTML：
1 2 3 4 5 6 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; }
（先前删除）：
它不是n-child，它是花车和百分比的组合。 这是我“修复”它的一种hacky方式：
#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对项目不重要，我会使用inline-block重构布局。
编辑：哎呀，我忽略了你已经尝试过这个。 但是，移动块时似乎工作正常吗？
您可以使用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处工作正常）