Question

我有一个项目网格，点击展开后会显示一个表格。它工作正常，但它按照我下面的插图重新排列DIV的位置。

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

以下是说明清楚的说明：

enter image description here

这是我的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;
}

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

Answer 1

在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

Answer 2

您可以通过以下方式完成此操作。

HTML：

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

CSS：

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

.col:hover {
    background: yellow;
}

JS：

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

现场演示：http://jsfiddle.net/S7r3D/1/

ETA：此解决方案的问题在于它将整行向下移动。我真的没有看到如何很好地实现你想要的......你可以尝试溢出其他div，但这取决于你的需求。这样的解决方案是否可以接受？

ETA2：实际上我认为它完美了！看看这里：http://jsfiddle.net/S7r3D/3/ 关键的变化是重新排列div并将它们放在列中。

HTML：

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

CSS：

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

JS：/* same as above */

Answer 3

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

否则你将难以控制他们的位置。

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

3 个答案: