jquery - 将页面内容推送到左浮动 div 下方

Question

我正在处理的网站的某些页面使用脚本根据页面标题自动创建目录。但是，让“toc”div 将页面的其余内容推到其下方时，我遇到了一些问题。

TOC div 在我的页面最里面的 div 中，“内容”。出于这个原因，我无法clear: both;像往常一样强制我的内容 div 低于 TOC。我不想将它移到“内容”之外，因为我希望 TOC 位于页面的 H1 标题下方，并且我想尽可能避免<div></div>垃圾邮件。

下面是一个带有简单布局的 jsfiddle，显示了我的意思。请注意，TOC 具有背景颜色。如果我将其宽度设为 100%，它会起作用，但颜色会拉伸，这不是我想要的。

我可能会更改生成 TOC 的脚本，因为我不太喜欢使用<a>标题的脚本。但是，我的问题在于 CSS，所以我认为我现在不会对此进行过多介绍。

欢迎提出关于创建更好脚本的好方法的建议（希望有源代码；我讨厌黑盒解决方案），尽管如此。

score 0 · Accepted Answer

那么为什么不直接摆脱float: left呢？如果您希望所有其他内容显示在下面，为什么要浮动它？只需摆脱浮动并在其上添加宽度即可。

#toc {
    background: #999;
    border: 1px solid black;
    padding: 0 1em 1em;
    width: 45%;
}

score 0 · Accepted Answer

你可以做几件事

您可以为每个 h2 标签添加相同的类，然后将两者都应用到 css 中的该类；

h2 {
    clear:both;
}

您也可以将您的内容包装在一个单独的 div 中，然后将两者都应用到该 div

我还修改了您的 jsfiddle 以使用一个变量来迭代 jQuery，因此您只需通过连接所有锚标记来 append() 一次。

2 回答 2