5

コンテンツの左下に div を配置できるようにしたいと考えています (このワイヤーフレームの div n°2 のように)。

トリックは、「コンテンツ」div内に手動で挿入することなく、それをやりたいということです。

(コンテキスト:私はそれをしたいワードプレスの投稿を500以上持っていますが、手動挿入ソリューションは苦痛でせいぜいおおよそのようです)。

position:absolute;bottom:0px; を使用してみました。しかし、そうすると、div 2 がコンテンツの上にあり、テキスト コンテンツの一部がマスクされます。

div2 の下部をコンテンツの正確な下部に合わせる方法についての手がかりはありますか? おそらくJqueryで?

これが私のHTMLコードの概要です。

<div class="contenu">
    <div id="1"><img class="ad_300x250" style="float:left; margin:0 10px 0 0;" src="300x250_3.jpg" /></div>
    <div id="2"><img class="ad_300x250" src="300x250_3.jpg" /></div>
    <p>Loin, très loin, au delà des monts Mots, à mille lieues des pays Voyellie et Consonnia, demeurent les Bolos Bolos. Ils vivent en retrait, à Bourg-en-Lettres, sur les côtes de la Sémantique, un vaste océan de langues.</p>
            <p>Un petit ruisseau, du nom de Larousse, coule en leur lieu et les approvisionne en règlalades nécessaires en tout genre; un pays paradisiagmatique, dans lequel des pans entiers de phrases prémâchées vous volent litéralement tout cuit dans la bouche. Pas même la toute puissante Ponctuation ne régit les Bolos Bolos - une vie on ne peut moins orthodoxographique.</p>
            <h2>Titre 2 </h2>
            <p>Un jour pourtant, une petite ligne de Bolo Bolo du nom de Lorem Ipsum décida de s'aventurer dans la vaste Grammaire.</p>
            <h3>Titre 3 </h3>
            <p>Le grand Oxymore voulut l'en dissuader, le prevenant que là-bas cela fourmillait de vils Virgulos, de sauvages </p>
            <h2>Titre 2 </h2>
            <p>Pointdexclamators et de sournois Semicolons qui l'attendraient pour sûr au prochain paragraphe, mais ces mots ne firent écho dans </p>
            <ul>
                <li>
                    l'oreille du petit Bolo
                </li>
                <li>
                    qui ne se laissa point déconcerter.
                </li>
                <li>
                    Il pacqua ses 12 lettrines, glissa son initiale dans sa panse et se mit en route.
                </li>
            </ul>
            <p>Alors qu'il avait gravi les premiers flancs de la chaîne des monts Italiques, il jeta un dernier regard sur la skyline de Bourg-en-Lettres, sa ville alphanatale, la headline d'Alphabetville, la subline de sa propre rue, le passage Motus. Le coeur lourd et nostalgique, une question rhétorique lui coula le long de la joue, puis, il se remit en route. </p>
            <p>En chemin, il rencontra un Copy. Le Copy prévint le petit Bolo que là d'où il venait, il avait déjà maintes et maintes fois été ressaisi, et que tout ce qui désormais restait de leurs origines était le mot "et", et que le petit Bolo ferait bien de se raviser, rebrousser chemin et retourner en son sain et sauf bercail. Mais toutes bonnes</p>

            <p>Alors qu'il avait gravi les premiers flancs de la cha&icirc;ne des monts Italiques, il jeta un dernier regard sur la skyline de Bourg-en-Lettres, sa ville alphanatale, la headline d'Alphabetville, la subline de sa propre rue, le passage Motus. Le coeur lourd et nostalgique, une question rh&eacute;torique lui coula le long de la joue, puis, il se remit en route.</p>
        </div>

ここに画像の説明を入力

4

2 に答える 2

4

float: を使用するだけで、div1 の場合とまったく同じように残しますが、div2 はテキストの最後の段落の直前に配置します。

そう...

<div class="wrapper">
   <div class="left1">
   <!-- DIV 1 -->
   </div>

   <p>Paragraph 1</p>

   <!-- more in the middle -->

   <p>Paragraph 5</p>

   <div class="left2">
   <!-- DIV 2 -->
   </div>

   <p>Paragraph 6</p>
</div>
于 2013-04-24T17:34:25.650 に答える
2

CSS ルールで修正する

コメントのターゲティング :

`context : 私は 500 以上のワードプレスの投稿をしたいと思っていますが、手動で挿入するソリューションは苦痛で、せいぜいおおよそのものに思えます

疑似要素と n 番目の子セレクターを組み合わせることができます (完全なブラウザー サポートを確認してください)。

修正する唯一のフィクスチャは、非常に大きな最後の段落がフロートを下から 1 つまたは複数の行に設定することです。大した問題ではないと思います。

とにかく、この擬似を使用すると、CSS がマークアップを忘れて 2 番目の div を見つけることができます。前に述べた画像の目的でimgタグまたは背景を使用できるため、画像は最後の段落のテキストでラップされます。私の例では、疑似要素を表示するために、色付きの背景と固定サイズを使用しました

.contenu p:nth-last-child(1):before {
    content:" ";   /* Or the image */
    display:block;
    width:200px;
    height:100px;
    background:#ff0000;  /* or the image */
    float:left;

}

ここでフィドルを参照してください もちろん、 div id ="2" は不要になりました。

ところで、重要: すべてのパーサーが数字で始まる ID に満足しているわけではありません!!

于 2013-04-24T18:46:40.100 に答える