如何讓div佔據整個屏幕的寬度？

Question

這可能很簡單，但我有幾個使用媒體查詢進行大小調整的嵌套div。我最初將盒子3作爲容器下面的單獨的div，但是引發了問題。所以我包括在容器中，並在框2格以下。我想這個div盒3佔據屏幕的整個寬度。

這裏是例如：https://jsfiddle.net/nsnhsLjq/

還讚賞上完全改善我的代碼的任何反饋。謝謝。

.box1 { 
width: 50%; 
padding: 15px; 
height: 150px; 
background: url(https://static.pexels.com/photos/27714/pexels-photo-27714.jpg) no-repeat center center scroll; 
background-position: 50% 50%; 
background-size: 90%; 
margin: 0 auto; 
} 

.box2 { 
width: 80%; 
padding: 15px; 
background-color: blue; 
color: #fff; 
margin: 0 auto; 
margin-top: 80px; 
} 

.box3 { 
background-color: #ccc; 
text-align: center; 
} 

<div class="container"> 
<div class="box1"> 
    <div class="box2"> 
     Box 2: 
    </div> 

    <div class="box3"> 
     Box 3: 
    </div> 
</div> 
</div> 

Answer 1

https://jsfiddle.net/MarcusPls/h6sprgnm/

.box3 { 
    background-color: #ccc; 
    text-align: center; 
    width: 100%; 
    top: 100px; 
    position: relative; 
} 

<div class="box3"> 
Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser. 
</div> 

這裏是一種方式的例子來解決你的問題..

而且，你不需要使用>爲/ <br>闖出一條線...就像按下回車鍵，所以只需使用「<br>」

Answer 2

如果您將方框3放在方框2下方，並在方框3中添加一些保證金頂部，您會得到如下效果想：

.box1 { 
 
\t width: 50%; 
 
\t padding: 15px; 
 
\t height: 150px; 
 
\t background: url(https://static.pexels.com/photos/27714/pexels-photo-27714.jpg) no-repeat center center scroll; 
 
\t background-position: 50% 50%; \t 
 
\t background-size: 90%; 
 
\t margin: 0 auto; 
 
} 
 

 
.box2 { 
 
\t width: 80%; 
 
\t padding: 15px; 
 
\t background-color: blue; 
 
\t color: #fff; 
 
\t margin: 0 auto; 
 
\t margin-top: 80px; 
 
} 
 

 
.box3 { 
 
\t background-color: #ccc; 
 
\t text-align: center; 
 
    margin-top: 95px; 
 
} 
 

 
.container { 
 
\t width: 100%; 
 
} 
 

 
@media screen and (max-width: 680px) { 
 
\t .box1 { 
 
\t \t width: 80%; 
 
\t \t background-size: 100%; 
 
\t } \t 
 

 
\t .box2 { 
 
\t \t margin-top: 10px; 
 
\t } 
 
}

<div class="continer"> 
 
This text should be above the container below. Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text 
 
<br /><br /> 
 
</div> 
 

 
<div class="container"> 
 
\t <div class="box1"> 
 
\t Box 1: I want this image to be slightly above box 1 and underneath box 1. I want this image to adjust the size as the browser size changes. 
 
\t \t <div class="box2"> 
 
\t \t \t Box 2: 
 
\t \t \t I want this box to be consistently on top of box 1. And I want this box to slightly hangoff the edge box 1.<br /><br /><br /> 
 
\t \t </div> 
 
\t </div> 
 
\t \t <div class="box3"> 
 
\t \t \t Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser. 
 
\t \t </div> 
 
</div>