JqueryUI手风琴在响应式设计中的应用

Question

我想知道如何使用媒体查询在响应式设计中容纳JUI手风琴。手风琴似乎需要比拥有它的div更多的空间......可能是边距设置？

当我尝试并排使用两个手风琴并使用媒体查询进行响应时，我遇到了这个问题

#accordionA,
#accordionB { display:block; width:100%; }


/* Double Column breakpoint at 576px */
@media all and (min-width: 36em){ 
            #accordionA { float: left; width:63%; }
            #accordionB { float: left; width:37%; }

        } 

在大屏幕上，手风琴不会被渲染，但可以在控制台中识别为元素。

如果我缩小它们出现的窗口大小，但仅限于520px。

我做了更改

    #accordionA { float: left; width:55%; }
    #accordionB { float: left; width:30%; }

现在我可以看到两种手风琴，但有些屏幕未使用过。我可以继续猜测我可以给2个accoridons的最大值，但我更愿意了解这里发生了什么。

手风琴小部件需要多少空间和多少空间？

Answer 1

如果有人为自己创建同样的问题，问题不在于jquery UI手风琴。

因为2支手风琴很可能具有不同的高度，所以记得

clear: both

在他们之后停止以下div干扰。