當瀏覽器使用像素值調整大小時，是否可以防止我的div層重疊？

Question

當瀏覽器大小調整大小時，遇到與div圖層重疊相關的問題。然後我發現，div屬性設置爲「px」值。

在檢查完stackoverflow後，我知道我們應該使用「em」或「percentage」而不是「px」值，以便在瀏覽器大小調整大小時克服div層的重疊。

我的疑惑：

爲什麼它不可能解決使用「PX」的價值觀是自我上面說的問題呢？如果可能的話，我該怎麼做？

Answer 1

由於元件的尺寸是已知的，在px給，你可以使用即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：

#container{ 
    width:100%; 
} 

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