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

2019年8月3日 141次阅读

所以这是问题,我有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：

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

最佳答案 (先前删除)：

它不是n-child,它是花车和百分比的组合.这是我修复它的一种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给每个第3个元素没有右边距并向右浮动,并缩小容器.这给出了你需要做的模糊近似.

但是,根据您的边距等,您将很难使其始终保持完美一致.在某些时候,将会有数字四舍五入到最近的像素(浏览器最终渲染像素！)因此您的边距可以是一个或两个像素.

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

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

点赞