Javascript 分区'；s扩展后自行重新排序-如何保持相同的顺序？

我有一个项目网格，单击“展开”可以在下面显示一个表。它工作得很好，但是它按照下面的插图重新排列了DIV的位置

我需要他们在各自的“专栏”中保持各自的位置

下面是一个说明：

这是我的HTML代码：

<div 
class="item-component" 
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>

<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
    Item - click to expand
</div>

<div class="codes-wrapper" collapse="isCollapsed">    
    <table class="table table-striped table-condensed">
        Expanded content here
    </table>    
</div>
</div>

---

如何在我的示例中实现“预期结果”

在

项目组件上使用
display:inline block
而不是
float:left


或者，您可以使用
：before
元素查看并执行此操作，并像以前一样维护
float:left
。
您还需要包装每一行：

.col{
    float:left;
    width: 32.33%;
    min-height: 50px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
}
.row{
    display:block;
}
/* This do the trick */
.row:before{
    content: " ";
    display: table;
    box-sizing: border-box;
    clear: both;
}




更新
如果不希望出现这种差异，则必须寻找另一个HTML标记。您必须先打印每列和每行

这是所需的html标记：

<div class="col">
    <div class="row" id="demo">1</div>
    <div class="row">4</div>
    <div class="row">7</div>
</div>

<div class="col">
    <div class="row">2</div>
    <div class="row">5</div>
    <div class="row">8</div>
</div>

<div class="col">
    <div class="row">3</div>
    <div class="row">6</div>
    <div class="row">9</div>
</div>

创建三个容器div，然后将{1,4,7}放入div1，{2,5,8}放入div2，{3,6,9}放入div3

否则，您将很难控制它们的位置。
您可以通过以下方式进行操作

HTML:

JS:

现场演示：

ETA：此解决方案的问题是它会将整行下移。我真的不知道如何很好地实现你想要的…你可以尝试溢出其他div，但这取决于你的需要。这样的解决方案是否可以接受

ETA2：事实上，我觉得我做得很完美！请看这里：
关键的变化是重新排列div，并将它们放在列中

HTML:

JS:
/*同上*/
如果您可以创建一个有助于更有效地解决问题的提琴，那么您必须使用表格而不是div@anurupr我正在使用AngularJS，并设置了自己的指令来扩展和折叠div。我想一个例子就足够了，因为这个问题并不难理解。这就解决了重新排序的问题。谢谢你的回答！但在你的两个例子中，第一行和下面第二行之间都有一个间隙#2和#3。那些不能留在原来的地方吗？是的，我需要使用最后一种解决方案。现在我只需要了解如何以“角度方式”迭代项。再次感谢您的努力！我认为消除这种差距的唯一方法是添加和迭代器来添加HTML标记，就像其他答案建议的那样？如果是这样的话，那么我宁愿在AngularJS中找到如何做到这一点，而不是有这样的差距。谢谢你的回答。@pedropeixoto:我编辑了我的答案，请检查一下。没有差距了：-）是的，看起来我必须添加一个迭代器来创建新的HTML标记。谢谢你的回答。我会接受阿尔瓦罗的回答，因为使用的方法是相同的，他先回答。这并不是说我不感谢你的帮助，我是的。谢谢你，伙计！
.col{
    float:left;
    width: 32.33%;
    min-height: 50px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
}
.row{
    display:block;
}
/* This do the trick */
.row:before{
    content: " ";
    display: table;
    box-sizing: border-box;
    clear: both;
}

<div class="col">
    <div class="row" id="demo">1</div>
    <div class="row">4</div>
    <div class="row">7</div>
</div>

<div class="col">
    <div class="row">2</div>
    <div class="row">5</div>
    <div class="row">8</div>
</div>

<div class="col">
    <div class="row">3</div>
    <div class="row">6</div>
    <div class="row">9</div>
</div>

.col{
    float:left;
    width: 32.33%;
}
.row{
   display:block;
   padding: 20px;
   box-sizing: border-box;
   background: #ccc;
   min-height: 50px;
}
#demo{
    height: 150px;   
    background: red;
}

<div class="container">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <br class="clear" />
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <br class="clear" />
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
<div>

.col {
    float: left;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

$('.col').click(function() {
    if ($(this).is('.clicked')) {
        $(this).removeClass('clicked');
    } else {
        $(this).addClass('clicked')
    }
});

<div class="container">
    <div class="fleft">
        <div class="col">1</div>
        <div class="col">4</div>
        <div class="col">7</div>
    </div>
    <div class="fleft">
        <div class="col">2</div>
        <div class="col">5</div>
        <div class="col">8</div>
    </div>
    <div class="fleft">
        <div class="col">3</div>
        <div class="col">6</div>
        <div class="col">9</div>
    </div>
<div>    

.col {
    clear: both;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

.col.clicked {
    height: 300px;
    background-color: red;
}

.fleft
{    
    float: left;
}