可排序的jQuery UI div与它们之间的间距对齐 [英] Alignment of sortable jQuery UI divs with spacing between them
问题描述
所以这就是问题，我有6个div正在使用 jQuery UI可排序。它们的排列如下图所示。
图像是我正在寻找的布局，每个div之间的间距相等，但是最后的那些对着边缘容器。
我的理解是，这不能通过例如设置一个margin-right：10px来完成，并删除第三个边距和第6个元素可能会被拖到不同的位置，因此它们将不再位于第3和第6位。
我认为不能这样做通过将每个部分添加到列div并在jQuery sortables设置中设置connectWith，因为这个6的集合本身在一个连接到其他列表的div中，我不认为你可以拥有connectWith：'。。connectctedSortable，.column'无论如何。
我也尝试使用伪类：nth-child（n）但无法得到ma在拖动元素时正确更新rgins :(
你可以在这里查看一个jsfiddle> http://jsfiddle.net/hC5Qy/1/
框的宽度目前设定为32％ ，我的想法是，我可以在两个方框上设置2％的右/左边距给出100％（32 + 32 + 32 + 2 + 2 = 100）。
<那么有什么想法吗？
有没有JavaScript方法可以做到这一点？任何新的CSS3或HTML5布局都可用于居中中间盒？ （我并不担心旧的浏览器兼容性。）
非常感谢任何帮助！
谢谢
HTML：
< div id =area1class =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：。connectctedSortable
}）;
$（。connectedSortable）。disableSelection（）;
}）;
CSS：
＃area1，＃area2 {
border：1px solid red;
float：left;
宽度：680px;
margin-bottom：15px;
背景：#ccc;
}
.block {
background：green;
宽度：32％;
身高：200px;
float：left;
保证金权利：1％;
margin-top：10px;
}
（先前已删除）：
这不是第n个孩子，而是浮动和百分比的组合。这是我修复它的一种hacky方式：
＃area1，＃area2 {
border ：1px纯红色;
float：left;
宽度：680px;
margin-bottom：15px;
背景：#ccc;
}
.block：nth-child（3n + 3）{
margin-right：0; //摆脱额外的保证金
float：right; //如果舍入更改排水沟，则向右浮动确保右侧无间隙
}
.block {
background：green;
宽度：32％; //其中3个= 96％
浮动：左;
身高：200px;
保证金权利：2％; //其中2个= 4％，总计100％
margin-top：10px;
}
使用nth-child给每个第3个元素没有右边距并向右浮动，并缩小容器。这给出了你需要做的模糊近似。
然而，根据你的边距等，你将很难让它始终保持完美的一致性。在某些时候，会有数字四舍五入到最近的像素（浏览器最终渲染像素！）所以你的边距可以是一个或两个像素。
这里有可以做更多的工作使其更加一致，但我认为你不需要我无休止地调整它;我得到的印象你只是想知道怎么了？这样你就可以自己继续吧。 ; - ）
对于我的两分钱，我不会使用浮点数，而是依赖于display：inline-block。 IE7及以下版本不支持内联块，但有一些黑客可以伪造它。如果IE6和7对项目不重要，我会使用内联块重构布局。
So here is the issue, I have 6 divs that are using jQuery UI sortable. They are arranged as can be seen in the image below.
The image is the layout I am looking for, equal spacing between each of the divs, but with the end ones up against the edges of the container.
My understanding is that this cannot be done by, for example, setting a margin-right:10px on all of them, and removing the margin on the 3rd and 6th elements as these may be dragged to a different position, therefore they would no longer be in the 3rd and 6th position.
I don't think it can be done either by adding each section into a column div and setting connectWith in the jQuery sortables setting as this set of 6 are themselves inside a div that is connected to other lists, and I dont think you can have connectWith: '.connectedSortable, .column' anyway.
I did also try using the pseudo-class :nth-child(n) but could not get the margins updating correctly when the elements were dragged around :(
You can view a jsfiddle here > http://jsfiddle.net/hC5Qy/1/
The width of the boxes are currently set at 32%, the idea being I could set a 2% right/left margin on two of the boxes to give 100% (32 + 32 + 32 + 2 + 2 = 100).
So any ideas?
Are there any JavaScript ways of doing this? Any new CSS3 or HTML5 layouts usable to center the middle box? (I'm not worried about old browser compatibility).
Any help is greatly appreciated!
Thanks
[edit: some code from the fiddle]
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;
}
(deleted prior post):
It's not nth-child, it's the combination of floats and percentages. Here's a hacky way I "fixed" it:
#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;
}
Used nth-child to give every 3rd element no right margin and floated right, and narrowed the container. This gives a vague approximation of what you need to do.
However, with your margins etc. based on % you will have a hard time making it perfectly consistent all the time. At some point there are going to be numbers rounded off to the nearest pixel (browsers render ultimately on pixels!) so your margins can be a pixel or two off.
There's more work that can be done to make it more consistent, but I didn't think you needed me to tweak endlessly at it; I got the impression you just want to know "what's up?" so that you can continue on it yourself. ;-)
For my two cents, I would use no floats, instead relying on display: inline-block. Inline-block is not supported in IE7 and below, though there are hacks to fake it. If IE6 and 7 are not important to the project, I would refactor the layout using inline-block.
这篇关于可排序的jQuery UI div与它们之间的间距对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
