如何让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>