我的 html 文件中有一个画廊和以下问题:
图像显示得很好，唯一的问题是第二行，其中 3 个图像“滑落”。这是一张图片:
我曾尝试使用 flex box 来解决这个问题，但我不太了解如何使用它。 顺便说一句，网站不会上线，因为我没有使用这些图片的权利。 只是为了学习。
代码:
section p {
margin-left: 5%;
}
section p iframe {
float: left;
margin-right: 2%;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 2em;
float: left;
width: 15%;
}<section>
<p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f2aSCvUhUBc" frameborder="0" allowfullscreen></iframe>The Witcher 3 ist eines der imposantesten Rollenspiele des 21. Jahrhunderts und nicht ohne Grund<br>mit über 800 Awards ausgezeichnet worden.<br>Das Spiel handelt vom Hexer Geralt, der die Welt vor dem weissen Frost bewahren soll,<br>besser gesagt soll dies seine Ciri (Cirilla), ein Kind des älteren Blutes und Tochter des Kaisers von Nilfgaard. Nur älteres Blut vermag den Frost aufzuhalten.<br>Doch dieses Spiel ist soviel mehr als nur eine Storyline:<br>Das Spiel lebt von einer dynamischen Welt, die sich ständig ändert, je nach dem, was Geralt im Laufe des Spiels für Entscheidungen trifft.<br> Insgesamt gibt es 36 verschiedene Enden und die NPCs verleihen dem Spiel ebenso viel Leben, wie die Musik, die Geräusche, die Landschaft und die sogenannte 40-Sekunden-Regel.<br>Diese besagt, dass im Spiel alle 40 Sekunden irgendetwas Spannendes passieren muss,<br>um den Spieler zu fesseln. Sei es ein Monster, eine vorbeirennende Rehherde oder ein umherstreifender Bandit.<br>Alles im Spiel ist kontext-sensitiv und hat Folgen, alles ist bis ins Kleinste durchdacht und hängt irgendwie zusammen.<br>Dieses Meisterwerk bietet wesentlich mehr, als so mancher Ego-Shooter und dergleichen.</p>
<br style="clear:both;" />
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3_en_wallpaper_hearts_of_stone_olgierd_1920x1200_1446735934.png">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/B1VXMu9UhiS.png">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/Tw3_Blood_and_Wine_cover_art.jpg">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/B1GDw8ra8QS.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3-new-game-plus-screenshot.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/1._Some_creatures_will_be_more_prone_to_inflammation_than_others._The_Igni_singn_works_perfectly_on_the_fiend..jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/NBFHut1.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/NEW_The_Witcher_3_Wild_Hunt_Ice_Giant_Hunt.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3-turm-screen.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/The-Witcher-3-9.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/wwh-3-1.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/2.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</section>最佳答案
问题是由于你的响应框在你 float 时高度不一致，要解决这个问题你需要使用伪类 :nth-of-type
在每六个元素之后清除 float 。
.responsive:nth-of-type(6n+1) {
clear: both;
}
示例:
section p {
margin-left: 5%;
}
section p iframe {
float: left;
margin-right: 2%;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
box-sizing: border-box;
padding: 1em;
float: left;
width: 15%;
}
.responsive:nth-of-type(6n+1) {
clear: both;
}<section>
<p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f2aSCvUhUBc" frameborder="0" allowfullscreen></iframe>The Witcher 3 ist eines der imposantesten Rollenspiele des 21. Jahrhunderts und nicht ohne Grund<br>mit über 800 Awards ausgezeichnet worden.<br>Das Spiel handelt vom Hexer Geralt, der die Welt vor dem weissen Frost bewahren soll,<br>besser gesagt soll dies seine Ciri (Cirilla), ein Kind des älteren Blutes und Tochter des Kaisers von Nilfgaard. Nur älteres Blut vermag den Frost aufzuhalten.<br>Doch dieses Spiel ist soviel mehr als nur eine Storyline:<br>Das Spiel lebt von einer dynamischen Welt, die sich ständig ändert, je nach dem, was Geralt im Laufe des Spiels für Entscheidungen trifft.<br> Insgesamt gibt es 36 verschiedene Enden und die NPCs verleihen dem Spiel ebenso viel Leben, wie die Musik, die Geräusche, die Landschaft und die sogenannte 40-Sekunden-Regel.<br>Diese besagt, dass im Spiel alle 40 Sekunden irgendetwas Spannendes passieren muss,<br>um den Spieler zu fesseln. Sei es ein Monster, eine vorbeirennende Rehherde oder ein umherstreifender Bandit.<br>Alles im Spiel ist kontext-sensitiv und hat Folgen, alles ist bis ins Kleinste durchdacht und hängt irgendwie zusammen.<br>Dieses Meisterwerk bietet wesentlich mehr, als so mancher Ego-Shooter und dergleichen.</p>
<br style="clear:both;" />
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3_en_wallpaper_hearts_of_stone_olgierd_1920x1200_1446735934.png">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/B1VXMu9UhiS.png">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/Tw3_Blood_and_Wine_cover_art.jpg">
<img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/B1GDw8ra8QS.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3-new-game-plus-screenshot.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/1._Some_creatures_will_be_more_prone_to_inflammation_than_others._The_Igni_singn_works_perfectly_on_the_fiend..jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/NBFHut1.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/NEW_The_Witcher_3_Wild_Hunt_Ice_Giant_Hunt.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/witcher3-turm-screen.png">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/The-Witcher-3-9.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/wwh-3-1.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="resources/img/2.jpg">
<img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</section>关于html - 图库图片的定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46784679/