CSS容器在父容器之外,也是不可能的

时间:2015-10-04 20:28:17

标签: html css

我目前正在开发一个cs go投注网站,我买了这个来源,所以我不熟悉它,我的CSS和HTML技能不是最好的,但我有一个问题,你可以看到从显示获胜者的容器下方的图片是从主容器中出来的。

http://i.stack.imgur.com/j3n4P.png

以下是该容器的css代码:

容器的实际类是名为" winner-left"

的类
 .winner {

    background: #737373;

    box-shadow: 0 -1px 0 #3c3c3c;
    padding: 12px 19px 12px 27px;
    position: relative;
    width: 100%;


}
.winner:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -21px;
    background: #696969;
    border: 1px solid #898989;
    box-shadow: -1px -1px 0 #202020, 1px -1px 0 #202020;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 3;
}
.winner:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    top: 0;
    z-index: 4;
    background: #6e6e6e;
}
.winner-left {
    float: left;
    position: left;
    width: 100%;

}

我真的会得到一些帮助!如果需要更多代码或信息,请问我!

div class="game-info gameend hidden">
    <div class="game-status"><strong>Game #<span class="game-num">99</span> - Over!</strong></div>
    <div class="all-players">
        <div class="all-players-list" style="-moz-transform: translate3d(390px, 0, 0);-ms-transform: translate3d(390px, 0, 0);-o-transform: translate3d(390px, 0, 0);-webkit-transform: translate3d(390px, 0, 0);transform: translate3d(390px, 0, 0); -moz-transition: 13s ease;-o-transition: 13s ease;-webkit-transition: 13s ease;transition: 13s ease; backface-visibility: hidden;">
    </div>
    </div>
    <div class="winner">
        <div class="winner-left">
            <h3>Last Winner <span id="winner-end">  </span></h3>
            <div class="winner-cost">
                <span class="winner-cost-title">Won:</span>
                <span class="winner-cost-value">~ 100.0</span>
                <span class="winner-cost-valuta"> $.</span>
            </div>
            <p>Prize will be sent through steam trade offer</p>
        </div>

0 个答案:

没有答案