Question

当调整浏览器大小时，我遇到了与div图层重叠相关的问题。然后我发现，div属性设置为“px”值。

在检查stackoverflow之后，我知道我们应该使用“em”或“percentage”而不是“px”值来克服浏览器大小调整后div层的重叠。

我的怀疑：

为什么用自己的“px”值解决上述问题是不可能的？如果可能的话，我该怎么做？。

Answer 1

由于px中给出了元素的大小，因此您可以使用min-width

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;
}

当使用像素值调整浏览器大小时，是否可以防止我的div图层重叠？

2 个答案: