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>

enter image description here

Answer 1

只需使用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>

Answer 2

使用CSS规则修复

定位您的评论：

`上下文：我有超过500个wordpress帖子，我想做那个，手动插入解决方案似乎很痛苦和近似充其量

您可以组合使用伪元素和第n个子选择器（请检查完整的浏览器支持）

只有固定的夹具是一个非常大的结束段落将你的浮动从底部放置一条或多条线。我想这不是一个大问题。

无论如何，使用这个伪你将能够找到你的第二个div与css忘记标记。您可以使用 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;

}

查看小提琴here 当然不再需要div id =“2”。

顺便说一句： 并非所有解析器都会对以数字开头的id感到满意!!

如何在我的内容的左下角设置浮动div？

2 个答案: