0

私が取り組んでいるサイトのいくつかのページでは、ページのヘッダーに基づいて目次を自動的に作成するスクリプトを使用しています。ただし、「toc」divを取得してページの残りのコンテンツをその下にプッシュするのに少し問題があります。

TOC div は、私のページ「コンテンツ」の最も内側の div 内にあります。このため、いつものようにコンテンツ div を TOC の下に強制することができませんでしたclear: both;。<div></div>TOC をページの H1 ヘッダーの下に置き、できるだけスパムを避けたいので、「コンテンツ」の外に移動したくありません。

以下は、私が何を意味するかを示す単純なレイアウトの jsfiddle です。TOC には背景色があることに注意してください。幅を 100% にすると機能しますが、色が伸びます。これは私が望むものではありません。

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

<a>タイトルを使用するスクリプトはあまり好きではないので、TOC を生成するスクリプトを変更する予定です。ただし、私の問題は CSS に関するものであるため、今はあまり詳しく説明しないと思います。

より良いスクリプトを作成するための良い方法についての提案は大歓迎です (できればソース コードを使用します。ブラック ボックス ソリューションは嫌いです)。

4

2 に答える 2

0

あなたができることがいくつかあります

各 h2 タグに同じクラスを追加し、css でそのクラスに clear both を適用できます。

h2 {
    clear:both;
}

また、コンテンツを別の div でラップし、その div に clear both を適用することもできます

また、変数を使用して jQuery を反復処理するように jsfiddle を変更したため、すべてのアンカー タグを連結して append() を 1 回実行するだけで済みます。

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

于 2013-10-12T19:31:03.553 に答える