5

我希望能够在我的内容的左下角放置一个 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>

在此处输入图像描述

4

2 回答 2

4

只需使用 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>
于 2013-04-24T17:34:25.650 回答
2

使用 CSS 规则修复

针对您的评论:

`context : 我有 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;

}

See a fiddle here 当然 div id ="2" 不再需要。

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

于 2013-04-24T18:46:40.100 回答