我有一个很酷的网格,它依赖于 text-align: justify
。我需要使用 javascript 重新排序这些元素,在重新排序、分离和再次添加它们之后,我注意到这些元素不知何故不再合理。
这是它的工作原理:
<div id="g">
<div>2</div>
<div>4</div>
<div>6</div>
<div>8</div>
<div>10</div>
<div>1</div>
<div>3</div>
<div>5</div>
<div>7</div>
<div>9</div>
<div>11</div>
<div>12</div>
<!-- These spans are here to keep the last line justified -->
<!-- Makes no difference to the problem whether they are there or not -->
<span></span>
<span></span>
<span></span>
</div>
JavaScript:
var divs = $('#g div');
// The sorting doesn't contribute to the problem.
// This could be commented out.
divs.sort(function(a, b) {
a = parseInt(a.innerHTML);
b = parseInt(b.innerHTML);
if(a > b) return 1;
if(a < b) return -1;
return 0;
});
// Remove comment from this last line to see what happens:
//divs.detach().prependTo($('#g'));
还有 CSS:
#g {
text-align: justify;
overflow: auto;
height: auto;
}
div,
span {
display: inline-block;
width: 24%;
height: 25px;
border: 1px solid #000;
}
span {
border: 0px;
height: 0px;
}
这是一个 fiddle :http://jsfiddle.net/3zLvemhc/2/
有没有办法找回理由?为什么它首先丢失了?我至少在 Chrome 和 Firefox 上得到了这种行为。
最佳答案
这个问题是因为在前置之后,你的元素之间没有任何空白。你可以通过添加一些来解决这个问题:
divs.detach().prependTo($('#g')).after(" ");
关于javascript - 分离和重新附加/前置理由丢失后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25668143/