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

Question

我是一名新手，试图弄清楚如何在调整浏览器大小时将这两个框堆叠在一起。 我不想使用float，我宁愿坚持使用inline-block，除非其他人对此有强烈的建议。 我当时在想使用inline-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. 使用媒体查询，根据屏幕尺寸为其定义不同的宽度。

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。

Right只是告诉div相对于相对位置（在此情况下为body）位于右侧。

通过绝对定位相对于整个窗口的高度100％，我已经解决了使用像素高度的问题，尽管您也可以相对于cp2_maincontainer定位并赋予其高度，使cp2_container2的高度相对于cp2_maincontainer的高度为100％。

祝好运。