如何使子div比父div更宽[重复]答案

【问题标题】：How to make a child div wider than the parent div [duplicate]如何使子div比父div更宽[重复]
【发布时间】：2016-03-20 20:31:02
【问题描述】：

我想制作一个child div，其宽度必须比parent div 宽。正如我读到的一些例子，写到child div 必须有一个relative position。我尝试了很多组合，但没有帮助我。请检查下面的 CSS 和 HTML 代码并帮助我。通常，我在 jsFiddle 中准备了它，但很难理解其中的问题。

我为要与容器设置相同宽度的 div 提供了一个名为 thatDivMustHaveTheSameWidthWithContainer 的 id。

CSS：

        .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;
        }

HTML：

<body>
<div class="site-container">
    <div style="min-height: 700px;">
        <div class="container">
            <div class="slider">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>

                        </div>
                    </div>
                </div>
            </div>

            <div class="slider" style="background-color: red;" id="thatDivMustHaveTheSameWidthWithContainer">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>

                        </div>
                    </div>
                </div>
            </div>

            <div class="slider">
                <div class="slider-container">
                    <div class="slider-content">
                        <div class="slider-content-wrapper">

                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">

                            </a>
                            <a href="#" class="slider-item product-item">
                                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">

                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

【问题讨论】：

你能创建小提琴吗？？
嗨@SunilGehlot。 jsfiddle.net/ebkkdjpv 但正如我所说的那样很难理解那里的问题：/

标签： html css

【解决方案1】：

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

.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;
}

<div class="parent">
  <div class="child"></div>
</div>

【讨论】：