浮动元素：先填写底线

Question

我正在开发的一个项目使用选项卡式导航。由于选项卡的数量是动态计算的，并且可能达到很高的数量，有时这些选项卡（本质上是带有 float: left; 的

元素样式声明）溢出到下一行，使用 [###] 显示选项卡，最终结果如下所示：

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

因为顶行的最后 4 个元素没有它们的元素“连接到”，这看起来很糟糕。

是否可以在 Javascript（如 jQuery 或 MooTools 等框架可接受，如果它们提供更短/更简单的解决方案）的帮助下先填写底行，然后将其余元素放在顶部？

像这样：

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

（问题标记为 MooTools，因为它是我们当前使用的 JS 框架。在任何其他框架中给出的答案都可以，因为它可能会快速转换为 MT）

Answer 1

下面是我用来解决这个问题的代码。
基本上，使用 JS，我们计算容器的宽度，并与选项卡的宽度（所有选项卡具有相同的宽度）一起计算每行选项卡的数量，以及余数。使用简单的模比较，我们可以插入 clear: Both 样式（强制选项卡移动到空行）。

var allTabs = $('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}

Answer 2

恐怕没有简单的解决方案可以完全满足您的要求。花车就是花车。最好的选择是使用 JavaScript 实时计算选项卡的尺寸和数量，然后使用 position:absolute 手动定位它们。不漂亮。

但将大量标签安装到狭小的空间中的问题是可以解决的。最简单的方法是为第二行中的选项卡提供一个额外的 css 类，并使用它将它们放置在第一行的顶部。这可以使用 javascript 在服务器端或客户端完成。或者，如果您知道选项卡的确切数量及其容器的确切宽度，那么您可以为它们设置 max-width 并让它们缩小一点。或者你可以使用 overflow:scroll 作为选项卡容器，但这肯定看起来很难看:)

Answer 3

用 JS 就可以轻松实现。小于伪代码：

• 创建一个 div （可选）
• 创建一个 ul
• 用 li 填充它，直到
  达到给定的最大数量或他们的
  组合宽度“略低于”所需的宽度
  width
• 将 div 添加到您的 html 文档中，
  保存对 id 重复的引用
• ，但如果您有已保存的引用
  到保存的 div，在前面添加新的
  那。

Answer 4

我建议将所有选项卡保留在一行上（使其宽度根据需要而定）并滚动到当前选项卡。 （您还需要一个列出所有可用选项卡的下拉菜单，以供导航。）

您尝试做的问题是，如果您确实得到了您想要的东西，选择顶行中的选项卡时会发生什么？

• 您有一个选定的选项卡未连接到当前面板（由底行选项卡分隔），这很丑陋，或者
• 您将顶行选项卡移动到底部（与面板相邻），在这种情况下，您会遇到这种情况您试图避免或
• 重新组织选项卡以将选定的选项卡放在底部，这会导致导航混乱（用户不可能了解选项卡在哪里）。