如何使左邊距「出現」在容器div之外？

注意如何使用引導程序時，容器DIV中的行格有左邊距「出現」的div容器外（左旁是黃色部分）：如何使左邊距「出現」在容器div之外？

我試圖複製這個使用下面的代碼行爲：

<!DOCTYPE html> 

<html> 
    <head> 
     <style> 
      #div1 
      { 
       width: 500px; 
       height: 400px; 
       border: 1px solid black; 
       margin-left: auto; 
       margin-right: auto; 
      } 

      #div2 
      { 
       width: 500px; 
       height: 200px; 
       background-color: red; 
       margin-right: 100px; 
       margin-left: 100px; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="div1"> 
      <div id="div2"> 
      </div> 
     </div> 
    </body> 
</html>

但它沒有工作（左旁留在容器DIV中）：

來源

2017-03-31 user7681202

自舉使用負值對'.row'左/右邊緣 –

你可以通過使用餘量，像這樣負值：

.row { 
    margin-left: -15px; 
    margin-right: -15px; 
}

來源

2017-03-31 22:13:05

你需要填充左填充右上DIV1相同的值基礎上的負利潤率左，保證金正確的價值DIV2。檢查我已刪除添加媒體查詢和框大小的片段，以獲得更好的視圖。和移除DIV2的寬度，並設置inital寬度

*{ 
 
    box-sizing:border-box; 
 
    } 
 
body{ 
 
margin:0; 
 
} 
 
#div1 
 
     { 
 
      width: 500px; 
 
      height: 400px; 
 
      border: 1px solid black; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      padding-right: 100px; 
 
      padding-left:100px;  
 
     } 
 

 
     #div2 
 
     { 
 
      
 
      height: 200px; 
 
      background-color: red; 
 
      margin-right: -100px; 
 
      margin-left: -100px; 
 
     } 
 
@media only screen and (max-width: 768px){ 
 

 
#div1 { 
 
    width: 81.584%; 
 
} 
 
}

<div id="div1"> 
 
    <div id="div2"></div> 
 
    </div>

來源

2017-04-01 00:27:20

如何使左邊距「出現」在容器div之外？

回答

相關問題