jquery - 在 jQuery Accordion 折叠栏上渲染列？

Question

我正在使用 jQuery Accordion 小部件，因此折叠栏上的文本需要进入 <h3> 内部标签。我的折叠栏包含三个独立的相关信息(文件名、大小和日期)。我真的很希望将这三个项目渲染在栏的左侧、中心和右侧，以便完全折叠的 Accordion 类似于一个三列表格。有什么办法可以做到这一点吗？

我尝试使用float:right (见下文)将文件名单独放在左侧，将大小和日期放在右侧。这并不完全是我想要的，但我认为这是一个合理的妥协。但是，当我展开该部分时，展开的区域仅延伸到右侧 float 文本开始的位置，而不是一直延伸到整个页面，这看起来有点奇怪。据我所知，它也没有提供任何方法来左对齐多个栏上的 float 文本，因为它们必须分开 float每个都有自己的宽度。

<h3>
  myfile.xls
  <span style="float:right">153 kB, 03/12/2013</span>
</h3>

接下来，我尝试添加一些 padding-right前两条数据(如下)。这工作得很好，但我的选择是指定一个固定大小，它不会随着窗口大小而缩小或扩大；或百分比，这不允许我在多个条上左对齐中心或右列。我还尝试输入 width:33%在每一条数据上，完全被忽略了。

<h3>
  <span style="padding-right:33%">myfile.xls</span>
  <span style="padding-right:33%">153kB</span>
  03/12/2013
</h3>

我真正想要的是三个等宽的列，每列中的文本左对齐。但我受到 jQuery 对 <h3> 的使用的限制。标签来指定折叠栏上的内容(我什至尝试了一个内部 <table> 一行，我完全知道它在内联元素中不起作用，但是嘿 - 我必须尝试一下!)。我需要使这项工作适用于 IE 8+ 和 Firefox 3+，尽管到目前为止，对于我尝试过的东西来说，两者都呈现相同的效果，所以我预计不会有太多麻烦(敲木头)。

如有任何建议，我们将不胜感激!谢谢!

Answer 1

如果我理解正确的话，您希望折叠栏上有三个相等的列，对吧？看看这个 fiddle :http://jsfiddle.net/victmo/f2Scp/我认为您忘记将 display:block 添加到您的条形或列中。

干杯