Question

我正在尝试使用“div #wrapper

之外的文本”最高分数“浮动图像

<div id="wrapper">
        <div class = "col1-content">
             <div class="ribbon left">
                <h2>My top Score</h2>
             </div>

        </div> <!-- col1-content -->
</div>

#wrapper .col1-content .ribbon{
    position: absolute;
    width:330px;
    height: 89px;
    z-index: 10;

}

#wrapper .col1-content .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
    left: -35px;
}

#wrapper .para h2{
    font-family:"Lucida Console", Monaco, monospace;
    font-size:24px;
    font-weight:lighter;
    padding-left: 30px;
}

Answer 1

<div id="wrapper">
        <div class = "col1-content">
             <div class="ribbon left">
                <h2>My top Score</h2>
             </div>
            <div class="para-score">
                <ul>
                    <li id="avatar"></li>
                    <li id="name"></li>
                    <li id="score"></li>
                </ul>
            </div>
        </div> <!-- col1-content -->
</div>

#wrapper {position:relative;}

#wrapper .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
    left: -35px;
    top:0;
    position:absolute;
}

Answer 2

您的文字正在该页面上消失，因为您使用的课程“左：-35px;”有相对的位置。您应该为其指定绝对位置或移动“left：-35px;”到.ribbon班。

#wrapper .col1-content .ribbon{
    position: absolute;
    left: -35px;
    width:330px;
    height: 89px;
    z-index: 10;

}

#wrapper .col1-content .left{
    background:url(../images/ribbon_left.png) no-repeat 0 0;
}

#wrapper .para h2{
    font-family:"Lucida Console", Monaco, monospace;
    font-size:24px;
    font-weight:lighter;
    padding-left: 30px;
}

如何将元素浮动到容器外？

2 个答案: