javascript - DIV 在扩展时自行重新排序 - 我如何保持相同的顺序？

我有一个元素网格，点击后会展开以显示其下方的表格。它工作正常，但它按照我下面的插图重新排列 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>

这是 .item-component 类:

.item-component {
  width: 33.33333333333333%;
  float: left;
  padding-left: 15px;
}

我将如何在我的插图中达到“预期结果”？

最佳答案

在 display:inline-block 上使用 float:left 而不是 .item-component
Living Demo

.item-component {
  width: 33.33333333333333%;
  display: inline-block;
  padding-left: 15px;
}

或者，您可以查看 BootStrap 并通过使用 :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;
}

Living example

更新
如果您不想要间隙，您将不得不寻找另一个 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>

以及所需的 css:

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

Living demo

关于javascript - DIV 在扩展时自行重新排序 - 我如何保持相同的顺序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21779673/