html - 为什么我的 div 不能在浏览器调整大小时堆叠？

Question

我是新手，正在尝试弄清楚如何在调整浏览器大小时将这两个框堆叠在一起。我不想使用 float ，我宁愿坚持使用内联 block ，除非其他人强烈反对它。我在想我猜想在使用内联 block 时，当 div 使用浏览器调整大小时，这些框会堆叠，但它没有发生。这些盒子越来越瘦，文本只是换行并超出了盒子。 `

.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;
}

<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>

Answer 1

你给了 div 一个百分比宽度。这意味着随着容器变小，它们也会变小，而且它们永远没有理由破裂。显而易见的解决方案是给它们一个固定的宽度(px，em)。

如果出于某种原因您需要百分比工作到某个点(例如，为了更大的屏幕)，我会想到两个选项:

1. 为 div 指定一个 min-width，这样一旦它们达到该宽度，百分比将被忽略并且该行将断开。
2. 使用媒体查询，根据屏幕尺寸为它们定义不同的宽度。