如何使子div比父div更宽

时间:2015-12-15 06:44:03

标签: html css css3

我想制作宽度必须大于child div的{​​{1}}。在我阅读一些例子时,我们写道parent div必须有child div。我尝试了很多组合,但没有帮助我。请检查下面的CSS和HTML代码并帮助我。通常情况下,我在jsFiddle中准备它,但很难理解那里的问题。

我给了一个名为relative position的id,我希望div与容器的宽度相同。

Css:

thatDivMustHaveTheSameWidthWithContainer

HTML:

        .site-container {
        background-color: #000;
        margin: 0 auto;
        max-width: 1600px;
        min-width: 1180px;
        width: 100%;
        position: relative;
    }

    .container {
        display: block;
        width: 1180px;
        margin: 0 auto;
        position: relative;
    }

    .slider {
        display: block;
        margin-bottom: 40px;
    }

        .slider .slider-container {
            position: relative;
            width: 1180px;
            height: 208px;
        }

            .slider .slider-container .slider-content {
                position: absolute;
                width: 1060px;
                left: 60px;
                height: 208px;
                overflow: hidden;
            }

                .slider .slider-container .slider-content .slider-content-wrapper {
                    width: 1080px;
                    height: 208px;
                }

                    .slider .slider-container .slider-content .slider-content-wrapper .slider-item {
                        width: 158px;
                        height: 206px;
                        border: 1px solid #333;
                        float: left;
                        display: block;
                        margin-right: 20px;
                    }

    .product-item {
        position: relative;
        overflow: hidden;
        width: 158px;
        height: 206px;
        border: 1px solid #333;
        float: left;
        display: block;
        margin-right: 20px;
    }

        .product-item img {
            width: 158px;
            height: 206px;
        }

1 个答案:

答案 0 :(得分:1)

实际上,我无法理解你真正想要做什么,但我已经为你创造了一个小提琴Check This On JsFiddle,我希望它可以帮助你......如果没有,请告诉我:) / p>

ifconfig -a
.parent {
  background-color: orange;
  margin:50px;
  width: 200px;
  position: relative;
  min-height: 200px;
}
.child {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -30px;
  right:-30px;
  background-color: green;
}

相关问题