Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

`

如果我将宽度设置为50％，那么每个div应该覆盖父级宽度的100％，它会将第二个div移到第一个和第二个下方。我将宽度设置为49％并且似乎有效（div不会消耗100％的父级，因此不会使第一个div碰到第二个）但是当页面调整大小时（在移动设备上查看，或在桌面上调整页面大小）在某一时刻原始问题再次发生。

有没有办法解决这个问题，所以每个div都可以占用div的一定百分比，每个div一起添加到整个父节点，并且在调整大小时它们保持在父div内并且任何溢出被削减，不要撞击或扭曲？我尝试过overflow-x：auto和hidden，但它仍然会碰到下面的第二个div，只是让父容器可以滚动。溢出-y只剪切父节点的整个第二个div。

Answer 1

删除inline-block元素之间的空格，然后添加box-sizing: border-box;。内联元素保留了空白区域，因此在元素之间的空白区域中，它们的组合宽度大于1。如果两者都设置为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>

Answer 2

试试这个：

.parent{
      height: 360px;
      margin-top: 0px;
      border: 1px solid rgba(255,255,255,0.3);
    display:flex;
    flex-wrap:wrap
    }
    .boxes {
      display: inline-block;
      flex-basis:180px;
      height: 100px;
      background:#454545;
      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>

Answer 3

你有一个边框。如果您觉得使用Flex感觉不舒服，可以试试这个：

   .parent{
      height: 360px;
      margin-top: 0px;
      border: 1px solid rgba(255,255,255,0.3);
      width: 100%;
      float: left;
    }
    .boxes {
      float: left;
      display: inline-block;
      width: calc(50% - 2px);
      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>

页面调整大小导致Div移位

3 个答案: