Warum stapeln meine divs nicht auf Browsergröße?

Question

Ich bin ein Neuling und versuche herauszufinden, wie diese beiden Boxen übereinander gestapelt werden, wenn der Browser die Größe ändert. Ich möchte Float nicht verwenden, ich bleibe lieber bei Inline-Blöcken, es sei denn, jemand anderes hat einen starken Vorschlag dagegen. Ich dachte, ich würde in Inline-Block verwenden, dass die Boxen stapeln würden, wenn die Größe des DIV mit dem Browser geändert wurde, aber es passiert nicht. Die Boxen werden nur Skinner und Skinner und der Text wird einfach umbrochen und übertrifft die Box. `

.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

Sie gab eine Breite in Prozent die divs. Das bedeutet, dass, wenn ihr Behälter kleiner wird, sie auch kleiner werden, und sie haben nie einen Grund zu brechen. Die offensichtliche Lösung besteht darin, ihnen eine feste Breite (px, em) zu geben.

Wenn aus irgendeinem Grund Sie Notwendigkeit die Anteile zu einem bestimmten Punkt aufzuarbeiten (zum Zwecke der größeren Bildschirmen zum Beispiel), zwei Möglichkeiten in den Sinn kommen:

1. Geben Sie den divs ein min-width, Wenn sie diese Breite erreicht haben, werden die Prozentwerte ignoriert und die Linie bricht ab.
2. Verwenden Sie Medienabfragen, und definieren Sie für sie eine andere Breite basierend auf der Bildschirmgröße.

Answer 2

.cp2_maincontainer { 
 
\t width:100%; 
 
\t height:300px; 
 
\t font-size: 0px; 
 
\t display:flex; 
 
\t justify-content: space-between; 
 
\t padding: 10px 50px 20px 50px; 
 

 
} 
 
.cp2_container { 
 
\t width:47%; 
 
\t height:100%; 
 
\t background: no-repeat center; 
 
\t display:inline-block; 
 
\t position: relative; 
 
} 
 

 
.cp2_subcontainer { 
 
\t background-color: rgba(211, 211, 211, 0.8); 
 
\t height:100%; 
 
\t width:100%; 
 
\t padding:10px 15px; 
 
\t font-size:16px; 
 
\t font-family: playfair display; 
 
\t position: absolute; 
 
\t outline:solid 2px darkgrey; 
 
\t outline-offset: -10px; 
 
} 
 
.cp2_subcontainer ul{ 
 
\t margin-left:20px; 
 
} 
 
.cp2_subcontainer p{ 
 
\t margin:10px; 
 
} 
 
.cp2_subcontainer h3{ 
 
\t padding:10px 0px; 
 
} 
 
.cp2_container2 { 
 
\t background-color: darkgrey; 
 
\t background: no-repeat center; 
 
\t width:47%; 
 
\t display:inline-block; 
 
\t position: relative; 
 
    min-width: 300px; 
 
    position: absolute; 
 
    right: 0; 
 
    height:300px; 
 

 
} 
 

 
.cp2_subcontainer2 { 
 
\t background-color: rgba(211, 211, 211, 0.8); 
 
\t height:100%; 
 
\t width:100%; 
 
\t padding:10px 15px; 
 
\t font-size:16px; 
 
\t font-family: playfair display; 
 
\t position: absolute; 
 
\t outline:solid 2px darkgrey; 
 
\t outline-offset: -10px; 
 

 
} 
 
.cp2_subcontainer2 ul{ 
 
\t margin-left:20px; 
 
} 
 
.cp2_subcontainer2 p{ 
 
\t margin:10px; 
 
} 
 
.cp2_subcontainer2 h3{ 
 
\t padding:10px 0px; 
 
} 
 
.addtextarea { 
 
\t \t color: black; 
 
\t padding: 10px; 
 
\t \t width: 100%; 
 
\t \t font-size: 16px; 
 
\t \t text-align: justify; 
 
\t }

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

Ich denke, das ist das, was Sie versuchen zu erreichen.

ich hinzugefügt/bearbeitet die folgenden auf .cp2_container2

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

Sie benötigen einen min-Breite überlappen, um die 2 Boxen haben, sonst werden sie die Hälfte der Breite der Seite und nicht immer überlappen .

Die Positionierung ermöglicht es dem div, frei über den statisch positionierten div zu fahren.

Rechts sagt dem div, dass es sich am rechten Rand dessen befindet, was es ist, in diesem Fall dem Körper.

Durch die absolute Positionierung der Höhe 100% wird relativ zum gesamten Fenster, habe ich mit einer Pixelhöhe gelöst, obwohl Sie auch die cp2_maincontainer relativ positionieren und ihm eine Höhe, so dass die Höhe 100% von cp2_container2 relativ Höhe von cp2_maincontainer.

Viel Glück.