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

这是一个小提琴：http://jsfiddle.net/3zLvemhc/2/

有没有办法让理由回来？为什么它首先丢失了？我至少使用Chrome和Firefox获得此行为。

Answer 1

问题是由于在预先添加之后，您的元素之间没有任何空白区域。你可以通过添加一些来解决这个问题：

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

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

在分离和重新出现/前置之后，理由失去了

1 个答案: