Question

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

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

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

我可能会更改生成TOC的脚本，因为我并不过分喜欢使用<a>标题的脚本。但是，我的问题是CSS，所以我认为我现在不会对此过分了。

欢迎使用有关创建更好脚本的好方法的建议（希望使用源代码;我讨厌黑盒解决方案）。

Answer 1

那么为什么不摆脱float: left呢？如果您想要在下面显示所有其他内容，为什么还要浮动它？只需摆脱浮动并在其上抛出宽度。

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

Answer 2

你可以做几件事

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

h2 {
    clear:both;
}

你也可以将你的内容包装在一个单独的div中，然后将clear清除到该div

我也修改了你的jsfiddle以使用变量迭代jQuery，所以你只需要通过连接所有的锚标签来追加（）一次。