我希望每行的第三个图像都在一行中.如何解决

Question

我已经将页面分成3部分，并为每个图像指定30%的宽度，剩余的10%由每个图像的两侧(6 10%/6侧(分割。答案是1.6666，但每一行的最后一个图像并不在同一行。

img{
width: 30%;
margin: 1.6666%;
}

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">    
</body>

Answer 1

像这样使用Flexbox：

建议：如果您需要间隙，请使用CSS网格

/* CSS */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1%; /* Want a gap? Add the gap here. */
}
img {
width: calc(98% / 3); /* you got 2 gaps @ 1% each. That leaves you with 98% to fill */
}

<!-- HTML -->
<div class="flex-container">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">
<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">    
</div>

这是超级简化的。我建议查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/以获得深入的指导。它将向您展示如何正确使用它。我不建议直接根据图片的标签来设置样式，而是根据它们的类来设置样式。

Answer 2

这是因为图像是内联元素，HTML代码中的换行符在输出中创建了一个小空间。

除了可以使用其他技术(如flexbox或grid(来解决这个问题(见其他答案(外，您可以通过两种方式避免这种现象：

1.(将它们全部放入一个代码行：

img {
width: 30%;
margin: 1.6666%;
}

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">

或

2.(在行尾和行首创建HTML注释；注释掉"；换行符：

img {
width: 30%;
margin: 1.6666%;
}

<img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt=""><!--
--><img src="http://unblast.com/wp-content/uploads/2021/08/Football-Vector-Illustration.jpg" alt="">