可排序的jQuery UI div與它們之間的間距的對齊

Question

所以這裏是問題，我有6個div使用jQuery UI可排序。它們的排列方式如下圖所示。

的圖像是我尋找每個的div之間，等間隔的佈局，但與端部的人靠在容器的邊緣。

我的理解是，這不能通過例如在所有這些邊上設置一個邊距右邊：10px來完成，並且移除第3和第6個元素上的邊距，因爲這些元素可能會被拖動到不同的位置，因此他們將不再處於第3和第6位。

我不認爲這可以通過將每個部分添加到一個列div和設置connectWith在jQuery sortables設置中來完成，因爲這6個本身是在一個連接到其他列表的div中的，並且我不會無論如何，你認爲你可以有connectWith：'.connectedSortable，.column'。

我確實也嘗試使用僞類：第n個孩子（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

（刪除之前的帖子）：

這不是小孩，它是浮點數和百分比的組合。下面是我「固定」它哈克的方式：

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

用於第n個孩子給每3單元沒有右頁邊距和浮動的權利，收窄容器。這給你需要做什麼模糊的近似。

但是，如果您的利潤率等基於％，您將難以一直保持完美的一致性。在某些時候，會有數字四捨五入到最接近的像素（瀏覽器最終渲染像素！），所以您的邊距可能是一個像素或兩個像素。

還有更多的工作可以使它更加一致，但我不認爲你需要我無休止地調整它;我有一個印象，你只是想知道「怎麼了？」這樣你就可以繼續自己。 ;-)

對於我的兩分錢，我會使用沒有浮動，而是依靠顯示：內聯塊。內聯塊在IE7及其以下版本中不受支持，儘管有些黑客可以僞造它。如果IE6和7對這個項目不重要，我會用inline-block來重構佈局。

Answer 2

編輯：哎呀，我忽略了你已經試過這個。但是，當你移動塊時它似乎工作正常？

你可以使用CSS3屬性第n個孩子：

.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/