為什么我的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％。

祝好運。