Question

我需要在同一行中对齐两个div并设置第一个width: 100px;

我要设置第二个div width: calc(100% - 100px);，然后div将转到下一行。我必须做一个100% - 102px，以便两个div可以保持在同一行。

我的问题是，为什么两个div的宽度之和不等于100％？总是少一两个像素。

.line {
  width: 100%;
}
.first-div {
  display: inline-block;
  width: 100px;
}
.second-div {
  display: inline-block;
  width: calc(100% - 100px);
}

<div class="line">
  <div class="first-div">First Div</div>
  <div class="second-div">Second Div</div>
</div>

Answer 1

啊，我确切地知道你错了。请记住，空格具有宽度！换行符也是空格，并且会折叠成一个空格。

解决方案非常简单-注释掉空白。或者，您可以将两个div放在同一行上。

这是第一个解决方案。

.line {
  width: 100%;
}
.first-div {
  display: inline-block;
  width: 100px;
}
.second-div {
  display: inline-block;
  width: calc(100% - 100px);
}

<div class="line">
  <div class="first-div">First Div</div><!--
  --><div class="second-div">Second Div</div>
</div>

Answer 2

您需要包括一个CSS重置样式表。否则，您可能会看到浏览器的内置填充。

Answer 3

那是因为您的像素为102像素，所以您要减去100％。一些数学：如果100％是1000px：您说一个div应该是100px。到目前为止一切都很好。但是，在这种情况下：100％-102px意味着：1000px-102px = 898px。如果现在将第一个div的宽度添加到第二个div的宽度，则得到： 898px + 100px = 998px。当然不是100％。

div宽度的总和小于100％

3 个答案: