ピクセル値を使用してブラウザのサイズを変更したときにdivレイヤが重ならないようにすることはできますか？

Question

ブラウザのサイズを変更したときに、divレイヤーのオーバーラップに関する問題が発生しました。それから、divプロパティが "px"値で設定されていることがわかりました。

私は、ブラウザのサイズを変更したときにdivレイヤーの重なりを克服するために、 "px"値の代わりに "em"または "percentage"を使用する必要があることを知りました。

私の疑問：

なぜそれが「PX」の値それ自身を用いて上記と問題を解決することはできないのですか？可能であれば、どうすればいいのですか？

Answer 1

、あなたはすなわちmin-width

body > div { 
 
    position: relative; 
 
    height: 60px; 
 
    width: 350px; 
 
} 
 
div.has-min-width { 
 
    min-width: 400px; 
 
} 
 
div > div { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 200px; 
 
    border: 1px dashed gray; 
 
    box-sizing: border-box; 
 
} 
 
div > div:last-child { 
 
    left: auto; 
 
    right: 0; 
 
}

<div> 
 
    <div>Hi, I'm a text that is long</div> 
 
    <div>Hi, I'm also a longer text</div> 
 
</div> 
 

 
<div class="has-min-width"> 
 
    <div>Hi, I'm a text that is long</div> 
 
    <div>Hi, I'm also a longer text</div> 
 
</div>

を使用することができます

Answer 2

インラインブロック要素でこれを行うことができます。ブラウザがサイズを変更すると、次の行に折り返されます。

https://jsfiddle.net/z9bnqzLf/1/

HTML：

<div id="container"> 
<div class="box"></div> 
<div class="box"></div> 
... 
</div> 

CSS：要素のサイズは、知らpxに与えられているので

#container{ 
    width:100%; 
} 

.box{ 
    width:50px; 
    height:50px; 
    background:red; 
    display:inline-block; 
    margin:5px; 
}