Question

我是一个新手，并试图弄清楚当浏览器调整大小时如何将这两个框堆叠在一起。我不想使用浮动，我宁愿坚持使用内联块，除非其他人有强烈建议反对它。我想我猜使用内联块，当div用浏览器调整大小时盒子会叠加，但它不会发生。盒子只是变得越来越光滑，文字只是包裹并超出盒子。 `

＆＃13;

.cp2_maincontainer {
  width: 100%;
  height: 300px;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 50px 20px 50px;
}

.cp2_container {
  width: 47%;
  height: 100%;
  background: no-repeat center;
  display: inline-block;
  position: relative;
}

.cp2_subcontainer {
  background-color: rgba(211, 211, 211, .8);
  height: 100%;
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  font-family: playfair display;
  position: absolute;
  outline: solid 2px darkgrey;
  outline-offset: -10px;
}

.cp2_subcontainer ul {
  margin-left: 20px;
}

.cp2_subcontainer p {
  margin: 10px;
}

.cp2_subcontainer h3 {
  padding: 10px 0;
}

.cp2_container2 {
  background-color: darkgrey;
  background: no-repeat center;
  width: 47%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.cp2_subcontainer2 {
  background-color: rgba(211, 211, 211, 0.8);
  height: 100%;
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  font-family: playfair display;
  position: absolute;
  outline: solid 2px darkgrey;
  outline-offset: -10px;
}

.cp2_subcontainer2 ul {
  margin-left: 20px;
}

.cp2_subcontainer2 p {
  margin: 10px;
}

.cp2_subcontainer2 h3 {
  padding: 10px 0;
}

.addtextarea {
  color: black;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  text-align: justify;
}

＆＃13;

<div class="cp2_maincontainer">
  <div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
    <div class="cp2_subcontainer">
      <h3 style="text-align:center;">Title for Text Box 1</h3>
      <p>Text in box # 1</p>
    </div>
  </div>
  <div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
    <div class="cp2_subcontainer2">
      <h3 style="text-align:center;">Title for Text Box 2</h3>
      <p>Text in box #2</p>
    </div>
  </div>
</div>
<div class="sectionbreak" align="center"></div>

＆＃13;

Answer 1

你给div的宽度是百分比。这意味着随着他们的容器越来越小，他们也越来越小，他们也没有理由打破它们。显而易见的解决方案是给它们一个固定的宽度（px，em）。

如果由于某种原因你需要百分比才能达到某个点（例如为了更大的屏幕），我会想到两个选项：

给div一个min-width，这样一旦它们达到那个宽度，百分比就会被忽略，然后就会断行。
使用媒体查询，根据屏幕大小为它们定义不同的宽度。

Answer 2

.cp2_maincontainer {
	width:100%;
	height:300px;
	font-size: 0px;
	display:flex;
	justify-content: space-between;
	padding: 10px 50px 20px 50px;

}
.cp2_container {
	width:47%;
	height:100%;
	background: no-repeat center;
	display:inline-block;
	position: relative;
}

.cp2_subcontainer {
	background-color: rgba(211, 211, 211, 0.8);
	height:100%;
	width:100%;
	padding:10px 15px;
	font-size:16px;
	font-family: playfair display;
	position: absolute;
	outline:solid 2px darkgrey;
	outline-offset: -10px;
}
.cp2_subcontainer ul{
	margin-left:20px;
}
.cp2_subcontainer p{
	margin:10px;
}
.cp2_subcontainer h3{
	padding:10px 0px;
}
.cp2_container2 {
	background-color: darkgrey;
	background: no-repeat center;
	width:47%;
	display:inline-block;
	position: relative;
    min-width: 300px;
    position: absolute;
    right: 0;
    height:300px;

}

.cp2_subcontainer2 {
	background-color: rgba(211, 211, 211, 0.8);
	height:100%;
	width:100%;
	padding:10px 15px;
	font-size:16px;
	font-family: playfair display;
	position: absolute;
	outline:solid 2px darkgrey;
	outline-offset: -10px;

}
.cp2_subcontainer2 ul{
	margin-left:20px;
}
.cp2_subcontainer2 p{
	margin:10px;
}
.cp2_subcontainer2 h3{
	padding:10px 0px;
}
.addtextarea {
		color: black;
	  padding: 10px;
		width: 100%;
		font-size: 16px;
		text-align: justify;
	}

<div class="cp2_maincontainer">
		<div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
				<div class="cp2_subcontainer">
					<h3 style="text-align:center;">Title for Text Box 1</h3>
					<p>Text in box # 1</p>
				</div>
		</div>
		<div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
				<div class="cp2_subcontainer2">
					<h3 style="text-align:center;">Title for Text Box 2</h3>
					<p>Text in box #2</p>
				</div>
		</div>
	</div>
	<div class="sectionbreak" align="center">
	</div>

我认为这是你想要完成的事情。

我在.cp2_container2

上添加/编辑了以下内容

min-width: 300px;
position: absolute;
right: 0;
height:300px;

您需要一个最小宽度才能让2个框重叠，否则它们将始终是页面宽度的一半，并且永远不会重叠。

定位绝对允许div自由地通过静态定位的那个。

右边只是告诉div在相对于它的相对的右边缘定位，在这种情况下是身体。

通过绝对定位高度100％变成相对于整个窗口的高度，我已经通过使用像素高度来解决，尽管你也可以将cp2_maincontainer定位为相对并给它一个高度，使得高度100％的cp2_container2相对于高度cp2_maincontainer。

祝你好运。

为什么我的divs堆栈在浏览器调整大小？

2 个答案: