定制手风琴内容divs共享相同的大小，不明白为什么

我正在构建一个网站，并发现这个定制的手风琴构建与jQuery（基本上，我希望同时打开多个容器），现在我发现，无论其内容如何，​​所有容器共享相同的大小（所以如果我在顶部容器中有内容，所有3个都有很高的高度）。 我缺少什么，以及如何让每个容器扩展到它的内容？ 谢谢您的帮助

由于本地jQuery-UI文件我没有正确显示小提琴，我已经在这里上传了整个内容。

$('#accordion').accordion({ collapsible: true, active: 1, beforeActivate: function(event, ui) { // The accordion believes a panel is being opened if (ui.newHeader[0]) { var currHeader = ui.newHeader; var currContent = currHeader.next('.ui-accordion-content'); // The accordion believes a panel is being closed } else { var currHeader = ui.oldHeader; var currContent = currHeader.next('.ui-accordion-content'); } // Since we've changed the default behavior, this detects the actual status var isPanelSelected = currHeader.attr('aria-selected') == 'true'; // Toggle the panel's header currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString())); // Toggle the panel's icon currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected); // Toggle the panel's content currContent.toggleClass('accordion-content-active', !isPanelSelected) if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); } return false; // Cancels the default action } }); $(document).ready(function() { $(document).tooltip(); $(".btn").button(); $("#dialog").dialog(); $("#dialog").dialog("close"); $("#check1").button(); $("#check2").button(); }); $("#loadFile").click(function() { $("#dialog").dialog("open"); }) 

 #cardbox, #previewbox { border: 1px solid black; display: inline-block; } #cardbox { width: 80%; } #previewbox { width: 20%; } 

         
 
Cards
 
 
BLAH
 
BLAH
 
 
Control Box
 
 
Draft number:   Load from file    Other Options:  Show Previous Picks  Use Timer 
 
 
Picks Log
 
This is where your picks will be displayed
 
 
 
Click the browse button in order to select the log file on your hard-drive. 
 
  
 
      

Answer 1

面板的高度由accordion的heightStyle属性控制，该属性有三个可能的值：

“auto”：所有面板都将设置为最高面板的高度。

“fill”：根据手风琴的父高度扩展到可用高度。

“内容”：每个面板只会与其内容一样高。

默认值为auto ，因此如果未将此属性显式传递给accordion，则所有面板的高度确实与您所描述的相同。 你似乎想要的行为可以通过显式传递heightStyle: 'content'来实现。

例如，

 $('#accordion').accordion({ collapsible: true, active: 1, heightStyle: 'content', beforeActivate: function() {/*...*/} }); 

Answer 2

可能存在一些样式表问题，下面的摘录视图中的所有内容都很好看。 但您可以尝试在卡片盒上设置填充并预览为0.并将其边距设置为自动。

也可能想尝试在div设置为中间或顶部的那些周围进行垂直对齐。

一个根本的解决方案是用td元素或跨度替换你的两个div元素。 除非你摆弄他们的风格，否则当他们并排放置时，他们行为不端。