html - float /环绕绝对定位的元素？

Question

我有一个内容框 ( #left-home-content )，其中包含一系列段落，最后是 <span> 中的一个链接。 ( .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 -->

这是一个 screenshot ，以说明我希望我的最终结果是什么样子(.read-more-link 将从上面的文本中占据它的位置，它不必与 #left-home-spread 对齐)。

有什么想法吗？ position:absolute;和 float不要混合，position:relative;只有“传播”<div> (又名 #left-home-spread )相对于其上方的文本内容定位自身。配售#left-home-spread在内容上方(就像现在一样)，设置它 float:right;然后给它一个很大的 margin-top导致右侧出现一个大洞，如 margin算作 float #left-home-spread 的一部分.

想法，有人吗？

Answer 1

看图片而不是阅读任何内容，我建议将展开的单词元素放在所有段落之后，然后将其向右浮动并使用负上边距。 没有绝对/固定定位。

<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 包装在另一个容器中以使其正常工作。但是盒子必须在后面。