chrome 和 Safari 中的浮动错误

Question

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

这是我的 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;
}

这是页面的 link：凯文杜圭.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%;
}

或类似的东西。

Answer 2

我认为您必须 "float: left" 3 div。并且您必须在 div 之后加上 "clear: both"。显然你需要设置一个边距来分隔那些 divs.

<section>
    <div>
        <img alt="LOGIC" src="/bundles/public/img/engrenage.png">
        <h2>LOGIC</h2>
    </div>
    <div>
        <img alt="PASSIONATE" src="/bundles/public/img/coueur.png">
        <h2>PASSIONATE</h2>
    </div>
    <div>
        <img alt="PERSEVERING" src="/bundles/public/img/montagne.png">
        <h2>PERSEVERING</h2>
    </div>
    <div style="clear: both;"></div>
</section>

Answer 3

我会使用 display:flex。删除所有显示内联块和浮动。将文章部分设置为 flex，并在媒体查询上更改 flex-direction 参数。

article section {
  width: 96%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
   flex-direction: column;
}

chrome 和 Safari 中的浮动错误

Float bug in chrome and Safari

css

google-chrome

safari

css-float