Question

我在CSS中设置了我的div的宽度，但是，我需要在div内部超出该宽度，但无法找到解决方案。这是我的CSS：

#wrapper {
    width: 845px;
    margin: 0 auto;
}

#wrapper #content {
    width: 630px;
    float: left;

}

#wrapper #content .post {

    background-image: url('images/black_linen_v2.png');
    padding: 10px;
    color: white; text-shadow: black 0.1em 0.1em 0.2em;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;



}

#wrapper #primary {
    color: white;
                }

#wrapper #primary .widget-container {
    color: white; text-shadow: black 0.1em 0.1em 0.2em;
    padding: 10px;

    background-image:url('images/black_linen_v2.png');  
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;

}

以下是我需要超越该领域的内容：

/* This is the ribbon effect */
.ribbon {
     background: #36ff36;
     background: -moz-linear-gradient(top, #36ff36, #21b521);
     background: -webkit-gradient(linear, left top, left bottom, from(#36ff36), to(#21b521));
     padding: 10px 10px;
     margin-left: 50px;
     margin-top: 0;
     position: relative;
     width: 100%;

    -moz-box-shadow: 1px 1px 3px #292929;
    -webkit-box-shadow: 1px 1px 3px #292929;

      /*round the top corners   */
    -webkit-border-top-left-radius: 10px ;
     -webkit-border-top-right-radius: 10px; 
    -moz-border-top-left-radius: 10px ;
    -moz-border-top-right-radius: 10px ;
    border-top-right-radius: 10px ;
    border-top-left-radius: 10px ;


    color: #454545;
    text-shadow: 1px 1px 0 #36ff36;
    text-align:center;
}

.arrowl {
     width: 0; height: 0;
     line-height: 0;
     border-left: 20px solid transparent;
     border-top: 10px solid #21b521;
     top: 104%;
     left: 0;
     position: absolute;
}
.arrowr {

     width: 0; height: 0;
     line-height: 0;
     border-right: 20px solid transparent;
     border-top: 10px solid #21b521;
     top: 104%;
     right: 0;
     position: absolute;
}

#footer {position: relative;
    background-image:url('../images/footer.png');
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 
/* End of ribbon effect*/

设定宽度与“.ribbon”冲突，我需要超出设定的宽度。

非常感谢帮助！

Answer 1

请发布你的HTML它将是一个猜谜游戏。但是，如果要创建一些位于其容器外部的项，则需要在容器上设置overflow属性。

Answer 2

在overflow:visible上设置#wrapper，并为.ribbon或填充使用更大（110％）的宽度。

Answer 3

您可以将对象设置为固定位置。然后定义位置和尺寸。确保您的父容器具有属性overflow:visible。您的子元素将如下所示

position: fixed;
width:*;
height:*;

超过Div宽度？

3 个答案: