Question

我正在使用jQuery手风琴小部件，因此折叠栏上的文字需要进入<h3>标签。我的折叠栏包含三个独立的相关信息（文件名，大小和日期）。我真的很喜欢在酒吧的左侧，中间和右侧渲染这三个项目，这样完全折叠的手风琴就像一个三柱的桌子。我有什么方法可以做到这一点吗？

我尝试使用float:right（见下文）将文件名单独放在左边，将大小和日期放在右边。这不是我想要的，但我认为这将是一个合理的妥协。但是，当我展开该部分时，展开的区域只会延伸到右浮动文本的开始位置而不是整个页面，这看起来有点奇怪。据我所知，它也没有提供任何方法将浮动文本左对齐多个条形，因为它们必须是单独的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

如果我理解正确，你想在折叠条上有三个相等的列，对吧？看看这个小提琴：http://jsfiddle.net/victmo/f2Scp/ 我想您忘记将display:block添加到条形图或列中。

干杯

Answer 2

你考虑过使用treeTable吗？像http://ludo.cubicphuse.nl/jquery-treetable/

这样的东西

听起来更容易将已显示柱状数据的内容改为导航控件，而不是尝试修改jQuery手风琴。

在jQuery手风琴折叠栏上渲染列？

2 个答案: