2013-10-12 78 views
0

我正在使用的網站的某些頁面使用腳本根據頁面標題自動創建目錄。然而,我有一個問題讓「toc」div將其餘的頁面內容推到它下面。將頁面內容推送到左浮動div

TOC div位於我的頁面「內容」的最裏面的div內。出於這個原因,我一直無法像通常那樣將我的內容div強制轉換爲低於TOC的clear: both;。我不想將它移動到「內容」之外,因爲我希望TOC低於頁面的H1標題,並且我希望儘可能避免<div></div>垃圾郵件。

下面是一個簡單的佈局,顯示我的意思是一個jsfiddle。請注意TOC具有背景色。如果我把它的寬度做成100%,它就可以工作,但顏色會延伸,這不是我想要的。

http://jsfiddle.net/n3yKf/2/

我可能會被改變,因爲我不太喜歡使用<a>標題腳本生成的TOC的腳本。不過,我的問題在於CSS,因此我認爲我現在不會太過分。

對於創建更好腳本的好方法的建議是受歡迎的(希望有源代碼;我討厭黑盒解決方案),儘管如此。

回答

0

有重新幾件事情你可以做

您可以在同一類添加到您的每一個H2標籤,然後應用明確雙方在CSS該類;

h2 { 
    clear:both; 
} 

你也可以換你的內容在一個單獨的DIV,然後應用明確既能該div

也是我修改您的jsfiddle遍歷jQuery的每一個變量,所以你只需要追加( )一次連接所有的錨標籤。原因

http://jsfiddle.net/n3yKf/5/

+0

你的第二個選擇是我決定去的那個。爲了將來的參考,我的特定實現是在這個更新的jsfiddle中。 http://jsfiddle.net/n3yKf/6/ – Flawedspirit

0

那麼,爲什麼不擺脫float: left?如果你想要在下面顯示所有其他內容,你爲什麼要浮動它?只是擺脫浮法,並拋出一個寬度。

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

的部分是,我只是想TOC框的內容向規模化,因此箱內填充。我認爲下面PAPAFRESH提供的解決方案可能是最好的。這意味着將TOC div封裝在另一個div中,但這是我不會完全失眠的原因。 – Flawedspirit