javascript - 分离和重新附加/前置理由丢失后

Question

我有一个很酷的网格，它依赖于 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 上得到了这种行为。

Answer 1

这个问题是因为在前置之后，你的元素之间没有任何空白。你可以通过添加一些来解决这个问题:

divs.detach().prependTo($('#g')).after(" ");

http://jsfiddle.net/3zLvemhc/1/