浮动/环绕绝对定位的元素？

Question

我有一个内容框（ #left-home-content ），其中包含一系列段落，最后是<span> （. .read-more-link ）中.read-more-link ，然后是<div> （ #left-home-spread ），我想绝对从盒子的底部定位。 那很容易。 诀窍是我希望让这些段落环绕<div> 。 代码如下，CSS优先：

/* @group Left upper home content */

#left-home-content-container {
    background-image: url(/dev/images/bg-primary-content.png);
    height: 273px;
    padding-top: 30px;
    margin-top: -15px;
    margin-left: 31px;
    position: relative;
    float: left;
}

#left-home-content {
    width: 590px;
    height: 240px;
}

#left-home-content h3 {
    font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    color: #e2876a;
    margin-bottom: 6px;
    font-size-adjust: 0.47;
}

#left-home-content p {
    line-height: 1.6;
    margin-bottom: .6em;
}

.read-more-link {
    display: block;
    font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    font-size-adjust: 0.47;
    font-weight: normal;
    font-style: normal;
    margin-top: 12px;
}

#left-home-content .read-more-link {
    margin-top: 12px;
}

#left-home-spread {
    position: absolute;
    bottom: 34px;
    right: 34px;
}

/* @group Spread the word */

.spread-the-word {
    background: url(/dev/images/bg-spread.png) no-repeat;
    width: 260px;
    height: 31px;
    padding-top: 17px;
    padding-left: 15px;
       -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4 */
            border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
            box-shadow: 0 0 5px rgba(86,86,86,0.25);
       -moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
    -webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}

.spread-the-word ul {
    float: left;
    margin: -7px 0 0 8px;
    width: 115px;
}

.spread-the-word li {
    float: left;
    list-style: none;
    width: 28px;
    height: 28px;
    margin: 0 12px 0 0;
}

.spread-the-word .last-item {
    margin-right: 0;
}

#left-home-content .spread-the-word h3 {
    color: white;
    font-size: 16px;
    float: left;
    font-size-adjust: 0.47;
    width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
    text-shadow: #627C39 0 0 10px;
    text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}

#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
    background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
    overflow: hidden;
    display: block;
    background-position: 0 0;
    height: 28px;
    width: 28px;
    line-height: 28px!important;
}

#left-home-content .at300bs:hover {
    opacity: 1;
            box-shadow: 0 0 15px #fff;
       -moz-box-shadow: 0 0 15px #fff;
    -webkit-box-shadow: 0 0 15px #fff;
}

#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }

#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }

/* @end */

/* @end */

和HTML一起使用。

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>
        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>

        <p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

这是一个屏幕截图 ，用于说明我希望最终结果如何（ .read-more-link将采用上面文本的位置，而不必与#left-home-spread对齐）。

有任何想法吗？ position:absolute; 和float不要混合， position:relative; 只是将“ Spread” <div> （aka #left-home-spread ）相对于其上方的文本内容定位。 将#left-home-spread放到内容上方（就像现在一样），将其设置为float:right; 然后给其较大的页margin-top会在右侧产生一个缺口，因为页margin算作浮动的#left-home-spread 。

想法，有人吗？

Answer 1

查看图片而不阅读任何内容，我建议在所有段落之后放置单词word元素，然后将其正确浮动并使用负的上边距。 无绝对/固定位置。

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>


        <p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>

        <p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>

        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

和CSS ..

.spread-the-word { float:right; margin-top:-200px; width:200px; }

上边距可以是整个盒子的高度。 在我看来，这是正确的。 您可能需要也可能不需要将所有段落和h3包装在另一个容器中才能正常工作。 但是盒子必须在以后。