chrome 和 Safari 中的浮动错误
Float bug in chrome and Safari
我在 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
为什么不将 3 个 div 设置为 inline-block 而不是 float?确保 div 之间没有空格(否则浏览器将显示空格)。
article section div {
display: inline-block;
width: 30%;
}
article section div:nth-child(2) {
margin: 0 5%;
}
或类似的东西。
我认为您必须 "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>
我会使用 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 中遇到了一个非常奇怪的错误。我有一个包含 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
为什么不将 3 个 div 设置为 inline-block 而不是 float?确保 div 之间没有空格(否则浏览器将显示空格)。
article section div {
display: inline-block;
width: 30%;
}
article section div:nth-child(2) {
margin: 0 5%;
}
或类似的东西。
我认为您必须 "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>
我会使用 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;
}