ブラウザでdivsスタックのサイズを変更しないのはなぜですか？

Question

私は初心者で、ブラウザーのサイズが変更されたときにこれらの2つのボックスを重ねる方法を理解しようとしています。私は浮動小数点を使用したくない、誰かがそれに対して強い示唆を持っていない限り、私はむしろインラインブロックに固執するだろう。私は、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）を与えることです。

あなたは必要割合は、（例えば、より大きな画面の目的のために）特定の時点までに作業するためにいくつかの理由のために、2つのオプションが気になる場合：

1. はdivをmin-widthを与えます、その幅に達すると、パーセンテージは無視され、行は破損します。
2. メディアクエリを使用して、画面のサイズに基づいて異なる幅を定義します。

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>

私は、これはあなたが達成しようとしているものだと思います。私は/追加した

は、あなたがそうでなければ、彼らは常にページの幅の半分であることと重複することはありません、2箱が重なるようにするために最小幅を必要とする.cp2_container2

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

で次のように編集しました。

位置を指定すると、divが静的に配置されたものを自由に通過できるようになります。

右は、それが相対的なもの、この場合は本文の右端に位置するように指示します。

高さ100％はウィンドウ全体に対して相対的になりますが、ピクセル高さを使用して解決しましたが、cp2_maincontainerを相対位置にして高さを指定すると、cp2_container2の高さは100％になりますcp2_maincontainerの高さ。

幸運。