Question

当两个div彼此相邻时，宽度设置为百分比，100％只是有点太多，并导致两个div不再相邻。

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

两个div在页面上的确适合的百分比是否存在？

这可能是造成这个问题的原因？

Answer 1

这可能是造成这个问题的原因？

根据默认的盒子模型，很可能这是填充/边框，它增加了元素宽度。要克服它，请更改要填充100％宽度的相应元素的box-sizing属性：

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

Answer 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>

100％不等于100％？

2 个答案: