html - 在一个 div 中以 2 列显示结果

Question

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

这是我的来源: JSBin

此元素是可折叠面板。当所有这些都折叠时，效果很好，但请先尝试扩展。

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

有什么办法可以保持一开始的样子吗？

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

Answer 1

http://jsbin.com/foboqoxi/1

将您的第二个 class="item"更改为 class="item2"。

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

并在class="item"中添加clear left

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