如何使一個孩子div比父div寬

我想要一個child div其寬度必須比parent div寬。正如我在一些例子中看到的那樣，它寫道child div必須有一個relative position。我嘗試了很多組合，但沒有幫助我。請檢查下面的CSS和HTML代碼，並幫助我。通常情況下，我準備在jsFiddle中，但很難理解那裏的問題。如何使一個孩子div比父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>

來源

2015-12-15 doganilker

能否請您創建小提琴？ –

Hi @SunilGehlot。 https://jsfiddle.net/ebkkdjpv/，但正如我所說，很難理解那裏的問題：/ – doganilker

其實，我不明白你真正想做的事，但我已經創建了一個搗鼓你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>

來源

2015-12-15 07:05:28

如何使一個孩子div比父div寬

回答

相關問題