1

私は WordPress を使用しており、テンプレートを変更してブログ ページに表示できるようにしようとしています。ページの右側にメニューがあり、左側にブログのコンテンツがあります。私が抱えている問題は、メニューの下のすべてのスペース<div>が無駄になっていて、メニューの周りにブログのコンテンツをラップ/フローさせたいということ<div>です。通常、メニュー<div>は右にフロートしますが、WordPress エンジンはこれ<div>をブログ コンテンツの後に出力するため、ページの右上隅にフロートする方法がわかりません。

説明のためにJSFiddleの例を作成しました。

4

3 に答える 3

2

必要に応じて、短い JavaScript を使用してメニューを移動できます。私があなたのものからフォークしたJSFiddleを参照してください。

基本的に、HTML を変更して、メニューとブログ コンテンツに ID を追加しました。たとえば、次のようになります。

<div id="blog">
    <p>...</p>
</div>
<div id="menu">
    ...
</div>

次に、CSSでそのようにスタイルを設定しました。メニューには明示的な幅がありますが、ブログのコンテンツ自体にはありません。

#blog { }
#menu {
    float: right;
    width: 400px;
}

次に、JQuery を少し使ってメニューをブログに移動し、メニューが右に浮かんでテキストが回り込むようにしました。

$('#blog').prepend($('#menu').remove());​

基本的に、JavaScript が行うことは、メニューを dom から削除し、それを最初の子として に挿入すること#blogです。</p>

于 2012-08-27T18:22:02.640 に答える
0

メニューのフロートを右に設定し、post div の上に配置する必要があります。

たとえば、CSS は次のようになります。

#post {width: 500px;}
#menu {
    float: right;
    width: 250px;
    height: 100px;
    color: #6666FF;
    border: solid 1px #333;
}

そしてHTML：

<div id="post">
<div id="menu">lorep ipsum</div>
</div>
于 2012-08-27T18:24:46.717 に答える
0

画像の場合と同じように、テキストを div で囲むことができます。例: http://jsfiddle.net/Nbpen/

于 2012-08-27T18:26:13.670 に答える