如何使用calc（）在div中设置相等的边距而calc（）不精确

Question

我想通过使用calc（）在同一行中的div之间设置相等的边距，但是出现了意想不到的事情。

当我有以下html结构时：

<div class="main">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

并应用以下style：

* {
  margin: 0;
  padding: 0;
}

.main > div {
  display: inline-block;
  color: #fff;
  height: 100px;
  width: 200px;
  margin-right: calc((100% - 600px) / 2);
}

.main .right {
  margin-right: 0;
}

然后div.right掉到下一行，这是意料之外的：

我猜原因是calc()进行舍入，导致不精确。

所以，我有一个问题：如何使用calc（）在同一行中的div之间设置相等的边距？

Answer 1

不要忘记考虑空白，因此您必须将其删除 （Why is there an unexplainable gap between these inline-block div elements? | How to remove the space between inline-block elements?）

这里我使用了font-size:0技巧

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.main {
  font-size:0;
}

.main > div {
  display: inline-block;
  color: #fff;
  height: 100px;
  width: 200px;
  margin-right: calc((100% - 600px) / 2);
  background:red;
  font-size:initial;
}

.main .right {
  margin-right: 0;
}

＆＃13;

<div class="main">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，我建议你使用flex和justify-content:space-between，这将在块之间添加相等的距离，你将拥有与上面相同的行为，代码更少，没有空白问题：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.main {
  display:flex;
  justify-content:space-between;
}

.main > div {
  display: inline-block;
  color: #fff;
  height: 100px;
  width: 200px;
  background:red;
  font-size:initial;
}

＆＃13;

<div class="main">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我明白你想做什么。但要想做到这一点不同。

将此应用于 .main div：

display: flex;
flex-flow: row wrap;
justify-content: space-between;

.main {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

* {
 margin: 0;
 padding: 0;
}

.main > div {
  background: green;
  color: white;
  height: 100px;
  width: 200px;
  text-align: center;
}

<div class="main">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

此外，您的项目是否需要响应？如果是的话，我会添加一些属性。