Question

我在父div中显示子项时遇到问题。

以下是我的来源： JSBin

此项目是可折叠面板。当它们全部折叠时，效果很好，但尝试延伸第一或第二。

如果您先扩展，则第三个向右移动。如果你扩展第二，第三个下降。

有没有什么方法可以保持原样？

我唯一想到的就是将它们分成两个独立的div，但问题是我正在使用，并且很难将结果分成两组;

Answer 1

http://jsbin.com/foboqoxi/1

更改您的第二个班级=＆＃34;项目＆＃34; to class =＆＃34; item2＆＃34;。

.item2 {
   float: right;
  clear: right;
  width:45%;
  margin-right: 20px;
}

并在class =＆＃34; item＆＃34;

中添加一个清晰的左侧

.item
{
  float: left;
  clear: left;
  width:45%;
  margin-right: 20px;
}

HTML：

<div class="item2">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf">
            <div class="heading">
                Second
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

如果可能，请使用bootstrap中的网格系统：

我添加了行并为每个项目提供了一个列类：

http://jsbin.com/vebaluwo/1/edit?html,css,js,output

Answer 3

   .ic{position:relative;width:500px; hieght:100px; }

   .item{width:240px;position:relative;z-index:10;}

   .item:last-child{width:100%;position:absolute;z-index:1;top:30px;}

在一个div中显示2列的结果

3 个答案: