Question

我只在Chrome和Safari中遇到了一个非常奇怪的错误。我有一个里面有3个div的部分。我希望它们并排放置，所以我在第一个上放置一个浮子，在中间一个上显示一个内联块，在最后一个上放一个浮子。这给了我我想要的东西。问题是，如果我在Chrome和Safari中调整浏览器的大小，我的第一次响应工作，但当我再次将浏览器调整为原始大小时，第三个div无法正确显示！甚至更奇怪，如果我甚至不调整浏览器的大小，我只是取消选中inspecteur中的浮动属性，然后我重新检查它，它不会回到原来的位置！我听说过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设置为内联块而不是浮点数？确保div之间没有空格（否则浏览器将显示空格）。

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

或类似的东西。

Answer 2

我认为你必须要＆＃34;浮动：离开＆＃34; 3个div。而且你必须把一个div放在＆＃34; clear：both＆＃34;后。显然你需要设置一个余量来分隔这些div。

<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中浮动bug

3 个答案: