jquery - 如何在我的内容左下角设置一个 float 的 div？

Question

我希望能够在我的内容的左下角放置一个 div(就像这个线框上的 div n°2)。

诀窍是我想这样做而不必手动将其插入“内容”div 中。

(上下文:我有 500 多篇 wordpress 帖子，我想这样做，手动插入解决方案似乎很痛苦，充其量只是近似)。

我尝试使用 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>

Answer 1

只需使用 float: left 与 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>