手风琴面板应放在顶部-没有足够的空间

Question

我必须创建一个手风琴，面板应保持在顶部，因此我将面板浮动以使其对齐。折叠所有按钮都可以，但是当我打开第一个按钮时，它的宽度为100％，然后将其他按钮按到下一行。即使打开一个面板，它们也应保持在顶部。我尝试了绝对定位和z-index，但是到目前为止我还没有解决方案。

// Accordion

.panel-group {
  background-color: transparent;
  margin-top: 30px;
  margin-bottom: 0;
  .panel {
    position: relative;
    display: block;
    .lh-box-shadow(none);
    .lh-border-radius(0);
    border: 0 none;
    float: left;
    margin-left: 5px;
    .panel-heading {
      background-color: transparent;
      border: none;
      padding: 0;
      .lh-border-radius(0);
      .panel-title {
        border: 0;
        font-size: 1em;
        position: relative;
        line-height: 1.3em;
        margin-bottom: 0;
        button {
          position: relative;
          text-align: left;
          border: 0;
          color: @white;
          background-color: @turquoise;
          text-transform: uppercase;
          white-space: normal;
          line-height: 1.444em;
          .lh-transition(all .3);
          padding: 2px 15px 0 15px;
            .circle{
              padding: 10px;
              display: inline-block;
              .lh-transition(all .3);
              .lh-transform(rotateZ(90deg));
              .fa {
                padding-left: 2px;
                display: block;
              }
            }
          }
        button.collapsed{
          border-top: 0;
        }
        button:hover, button.collapsed:hover, button:active, button.collapsed:active, button:focus, button.collapsed:focus {
          background-color: @blue;
          color: @white;
          .fa {
            color: @white;
          }
        }
        button.collapsed {
          color: @white;
          opacity: 1;
          .circle {
            .lh-transform(rotateZ(0deg));
          }
          .fa {
            color: @white;
          }
        }
        button:focus,  button.collapsed:focus{
          outline: -webkit-focus-ring-color auto 0;
        }
      }
    }
    .panel-collapse{
      background-color: transparent;
      border-top: 1px solid @grey;
    }
    .clearfix{
      clear: both;
    }
  }
  .panel+.panel {
    margin-top: 0;
  }
}
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group {
  border-top: 0;
}

    <div class="panel-group" id="accordion2-{record.uid}" role="tablist" aria-multiselectable="true">
        <f:for each="{reiter}" as="sectionObject" iteration="iteration">
            <f:if condition="{sectionObject.item.norender}">
                <f:else>
                    <div class="panel panel-default {sectionObject.item.colors}">
                        <div class="panel-heading" role="tab" id="heading-accordion1-{record.uid}-{iteration.cycle}">
                            <h4 class="panel-title">
                                <button class="{f:if(condition:'({firstopen} && {iteration.isFirst})',then:'',else:'collapsed')}" data-toggle="collapse" data-parent="#accordion2-{record.uid}"  data-target="#collapse-accordion1-{record.uid}-{iteration.cycle}" aria-expanded="{f:if(condition:'({firstopen} && {iteration.isFirst})',then:'true',else:'false')}" aria-controls="collapse-accordion1-{record.uid}-{iteration.cycle}">
                                    {sectionObject.item.name}
                                    <span class="circle"><i class="fa fa-caret-right"></i></span>
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-accordion1-{record.uid}-{iteration.cycle}" class="panel-collapse collapse{f:if(condition:'({firstopen} && {iteration.isFirst})',then:' in')}" role="tabpanel" aria-labelledby="heading-accordion2-{record.uid}-{iteration.cycle}">
                            <div class="panel-body">
                                <flux:content.render area="column{iteration.cycle}" />
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </f:else>
            </f:if>
        </f:for>
    </div>