Question

使用此代码，我可以根据需要并排获得两个div。除此之外，缺少第二个div的右边界。这似乎是一个大小问题，好像div超出范围......我该如何解决这个问题？

我试图添加边距，没有任何效果......

＆＃13;

.wrapper {
   width: 100%; 
   white-space: nowrap;
   overflow: hidden;
}
    
.left { 
    width: 50%; 
    height:10px;
    border: 1px solid; 
    display: inline-block;     
}

.right {
    width: 50%; 
    height:10px; 
    border:1px solid; 
    display: inline-block;
    margin-left: -1px;
}

＆＃13;

<body style="margin-right: 50px">
  <div class="wrapper">
    <div class="left"></div><div class="right"></div>
  </div>
</body>

＆＃13;

Answer 1

从overflow: hidden移除.Wrapper，您的右边墙将返回。

请参阅更新后的JSFiddle：https://jsfiddle.net/8x2c4z16/2/

Answer 2

你需要从包装中删除溢出，这些边框每个左右添加1px，使其稍微超过页面的100％，溢出会将其关闭。

这两个div在左右两侧都是50％加上1px，使得总数超过页面的100％，并且包装器溢出会将其关闭。

Answer 3

我认为您正在寻找box-sizing:border-box;

.wrapper {
       width: 100%; 
       white-space: nowrap;
       overflow: hidden;
    }
    
    .left { 
        width: 50%; 
        height:10px;
        border: 1px solid; 
        display: inline-block;
        box-sizing:border-box;
        border-right-width :0
    }
    .right {
        width: 50%; 
        height:10px; 
        border:1px solid; 
        display: inline-block;
         box-sizing:border-box;
    }

<div class="wrapper">
        <div class="left"></div><div class="right"></div>
      </div>

box-sizing reference

box-sizing属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

width和height属性包括内容，填充和边框，但不包括边距。

Answer 4

只需将左右类的宽度设置为48％

内联块div失去右边界

4 个答案: