Question

我有一个内容框（#left-home-content），其中包含一系列段落，最后是<span>（.read-more-link）中的链接，然后是{{1我希望（<div>）完全从盒子的底部定位。这很容易。诀窍在于我希望段落包围这个#left-home-spread。代码如下，CSS首先：

<div>

和HTML一起使用它。

/* @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 */

这是一个screenshot，用来说明我最终的结果是什么样的（<section id="left-home-content-container" class="left-col"> <div id="left-home-content"> <h3><a href="#">Now Let’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> </section>将从上面的文字中取出它的位置，它不必与之对齐.read-more-link）。

有什么想法吗？ #left-home-spread和position:absolute;不混合，float只有“点差”position:relative;（又名<div>）相对于其上方的文字内容定位。将#left-home-spread置于内容之上（就像现在一样），将其设置为#left-home-spread，然后为其设置一个较大的float:right;会导致右侧有一个大洞，{{1}算作浮动margin-top的一部分。

想法，有人吗？

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

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

1 个答案: