Question

这可能很简单，但我有一些使用媒体查询进行大小调整的嵌套div。我最初将盒子3作为容器下面的单独div，但是引起了问题。所以我包括在容器中和盒子2下方div。我希望这个div框3占据屏幕的整个宽度。

同时感谢任何关于完全改进我的代码的反馈。感谢。

yield

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>

以下是解决问题的一种方法示例..

此外，您不需要使用/＆gt;让<br>打破一行...就像按下回车键所以只需使用“<br>”

Answer 2

如果您将方框3放在方框2下方，并在方框3中添加一些margin-top，您将获得所需的效果：

.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;
  margin-top: 95px; 
}

.container {
	width: 100%;
}

@media screen and (max-width: 680px) {
	.box1 {
		width: 80%;
		background-size: 100%;
	}	

	.box2 {
		margin-top: 10px;
	}
}

<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">
	<div class="box1">
	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.
		<div class="box2">
			Box 2:
			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 />
		</div>
	</div>
		<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>
</div>

如何让div占据屏幕的整个宽度？

2 个答案: