html - 页面大小调整导致Div替换

我有一个主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，只是使父容器可滚动。溢出-只是从父级剪切整个第二个div。

最佳答案

删除inline-block元素之间的空格，然后添加box-sizing: border-box;。内联元素保留空白，因此，如果两个元素之间都留有空白，则将两者的总宽度设置为width: 50%时，其合并宽度> 100％。默认情况下，填充和边框使元素的盒模型超出其指定的宽度。 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>

关于html - 页面大小调整导致Div替换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41969443/