手风琴下拉旁边的CSS浮动按钮

Question

我试图在jQuery手风琴面板旁边浮动一个按钮。目前它看起来像这样：

这是标记

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" style="width: 80%;" role="tablist">
</div>

<div id="export" style="width:20%">
   <form method="post" action="/InstrumentList/Export">
      <div class="button-container">
         <button id="btnSubmit" class="ui-button-text-only ui-button ui-igbutton ui-widget ui-widget-content ui-corner-all ui-state-default" style="width: 100%;" value="Export" type="submit" role="button" aria-disabled="false">
      </div>
   </form>
</div>

<div id="grid">
</div>

我现在已经设置了内联样式，但是一旦我设法使其工作，我会将其移到CSS文件中。网格div在图片中由浅灰色行表示，需要保持位于深灰色行下。

Answer 1

我认为您打算在打开#accordion div之前关闭#export div。

您的问题优先于答案：您应该能够在每个div上添加float:left属性。

#accordion {
    width: 80%;
    float: left;
}
#export {
    width: 20%;
    float: left;
}

您可能还需要确保对于这两个div，margin-left和margin-right都设置为零。

更新以确保#grid不与浮动元素重叠，您应该使用clear:both。

Answer 2

如果我正确理解了这个问题，你需要这个：

#accordion, #export {
    float: left;
}

#grid {
    clear: both;
}