html - 页面调整大小导致 Div 移位

Question

我有一个主 div，两个 div 水平并排放置在这个父 div 中。

    .parent{
      height: 360px;
      margin-top: 0px;
      border: 1px solid rgba(255,255,255,0.3);
    }
    .boxes {
      display: inline-block;
      width: 49.85%;
      height: 100%;
      border: 1px solid rgba(255,255,255,0.3);
    }

  

        <div class="parent">
            
            <div class="boxes">ayy lmao</div>
            <div class="boxes">ayy lmao</div>
            
        </div>

`

如果我将宽度设置为 50%，那么每个 div 应该覆盖父级宽度的 100%，它会取代第二个 div，使其低于第一个 div 并向右移动。我将宽度设置为 49%，它似乎可以工作(div 不会占用父级的 100%，因此不会使第一个 div 将第二个向下撞)，但是当调整页面大小时(在移动设备或页面上查看)在桌面上调整大小)在某个时候原始问题再次发生。

有没有办法解决这个问题，这样每个 div 都可以占据 div 的一定百分比，每个一起添加到整个父级，并且在调整大小时它们留在父级 div 内并且任何溢出都被剪掉，不要撞倒或扭曲？我试过 overflow-x:auto 和 hidden，但它仍然会碰到下面的第二个 div，只是让父容器可以滚动。 Overflow-y 只是从父级剪辑整个第二个 div。

Answer 1

删除inline-block 元素之间的空格，并添加box-sizing: border-box;。内联元素保留空白，因此对于元素之间的空白，如果两者都设置为 width: 50%，则它们的组合宽度 > 100%。默认情况下，padding 和 border 会使元素的盒模型超出其指定的宽度。 border-box 允许您在遵守元素的指定宽度的同时使用填充和边框。

.parent{
  height: 360px;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
.boxes {
  display: inline-block;
  width: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  box-sizing: border-box;
  height: 100%;
}

  <div class="parent"><div class="boxes">ayy lmao</div><div class="boxes">ayy lmao</div></div>