100%不等于100%？答案

【问题标题】：100% is not equal to 100%?100%不等于100%？
【发布时间】：2016-03-22 22:59:57
【问题描述】：

当两个 div 彼此相邻时，两个 div 的宽度都以百分比设置，100% 有点过分，导致两个 div 不再彼此相邻。

99% 然后在两个 div 之间留下相当大的差距。

两个 div 是否有一定的百分比可以很好地适合页面？

这个问题的原因可能是什么？

【问题讨论】：

使用 css 属性 margin 可能吗？如果一个 div 有 100% 的边距可能不起作用。
有时我觉得这是由于网络浏览器的边界造成的。你在全屏模式下也有同样的结果吗？
在没有更多上下文的情况下可能无法回答这个问题，最好使用示例。
如果两个 100% 宽度的元素可以放入一个宽度显然是 100% 的父元素中，那就太奇怪了。你的意思是 2 个宽度为 50% 的 div？因为只有当它们的宽度加起来 =jsbin.com/hojepinide/1

标签： html css

【解决方案1】：

这个问题的原因可能是什么？

这很可能是填充/边框根据默认框模型加起来元素宽度。要克服它，请更改要填充 100% 宽度的各个元素的 box-sizing 属性：

.inline-blocks {
    box-sizing: border-box;
}

【讨论】：

记得使用带有 box-sizing 的供应商前缀，没有它们仍然不能很好地支持。
@AmarSyla 供应商前缀不需要盒子大小，仅适用于非常旧的 firefox。

【解决方案2】：

如果您使用内联显示，则两个单独节点之间的新行将作为空格包含在内。这会导致两个元素环绕，尽管它们的宽度总和为 100%。

.container {
  width: 200px;
  border: 1px solid blue;
}

.inl {
  display: inline-block;
  width: 50%;
  height: 20px;
  background: green;
}

<div class="container">
  <div class="inl"></div>
  <div class="inl"></div>
</div>

<div class="container">
  <div class="inl"></div><div class="inl"></div>
</div>

【讨论】：