css - Chrome 和 Safari 中的 float 错误

Question

我在 chrome 和 Safari 中遇到了一个非常奇怪的错误。我有一个里面有 3 个 div 的部分。我希望它们并排放置，所以我在第一个左边放置了一个 float block ，在中间一个放置了一个显示内联 block ，在最后一个右边放置了一个 float block 。这正是我想要的。问题是，如果我在 chrome 和 Safari 中调整浏览器的大小，我的响应第一次工作，但是当我再次将浏览器调整到其原始大小时，第三个 div 无法正确显示!更奇怪的是，如果我什至不调整浏览器的大小，我只是取消选中 inspecteur 中的 float 属性，然后我重新检查它，它就不会回到原来的位置!我听说 chrome 有一个 bug，但我不确定我说的是不是同一个 bug...

这是我的 CSS 和 HTML:

<section>
    <div>
        <img src="img/engrenage.png" alt="logique" />
        <h2>LOGIQUE</h2>
    </div>
    <div>
        <img src="img/coueur.png" alt="passionne" />
        <h2>PASSIONNÉ</h2>
    </div>
    <div>
        <img src="img/montagne.png" alt="perseverant" />
        <h2>PERSÉVERANT</h2>
    </div>
</section>

/* line 41, ../sass/accueil.scss */
article section {
  margin: 15px auto 30px;
  width: 96%;
}
/* line 47, ../sass/accueil.scss */
article section div {
  border-radius: 10px;
  background: #f4f5f5;
  color: #1f1f1f;
  width: 32%;
}
/* line 55, ../sass/accueil.scss */
article section div:nth-child(1) {
  float: left;
}
/* line 62, ../sass/accueil.scss */
article section div:nth-child(2) {
  display: inline-block;
}
/* line 69, ../sass/accueil.scss */
article section div:nth-child(3) {
  float: right;
}

页面链接如下:Kevinduguay.ca/en

Answer 1

为什么不将 3 个 div 设置为 inline-block 而不是 float？确保 div 之间没有空格(否则浏览器将显示空格)。

article section div {
    display: inline-block;
    width: 30%;
}
article section div:nth-child(2) {
    margin: 0 5%;
}

或类似的东西。