我的网站上有一个图片库。我不得不更改我用来制作的模板，以便画廊以 3 或 4 行水平显示图像。老实说，我不记得我是怎么做到的，但是当我的名字主机最近删除了我的网站(不要问)并重新 UL 我的文件时，那个画廊看起来就像我第一次 DL 模板时一样，现在我无法再获取行了。
我尝试注释掉一些比较我拥有类似镜像站点的 DIV，但我没有看到任何变化。我设置的镜像站点不同，因此它不像我希望的那样合适。无论如何，画廊有带标题的图像，我尝试重新排列信息但无济于事。我的临时修复是实际站点上的一些非常混乱的 HTML(therealitycomics.com - 图库部分，目前只有 5 张图像)。
<footer id="footer">
<div class="inner">
<div class="gallery cf">
<div>
<a target="_blank"
href="http://therealitycomics.com/images/Postcard.jpg">
<img src="http://therealitycomics.com/images/Postcard.jpg" alt="The
Reality" width="155" height="220">
</a>
<div>How our Intraverse<br>connects</div>
</div>
<div>
<a target="_blank"
href="http://www.therealitycomics.com/patreon/PK11.jpg">
<img src="http://www.therealitycomics.com/patreon/PK11.jpg" alt="Phantom
Kid layout" width="155" height="220">
</a>
<div>Phantom Kid pg<br>Layout 1</div>
</div>
<div>
<a target="_blank"
href="http://www.therealitycomics.com/patreon/PK11b.jpg">
<img src="http://www.therealitycomics.com/patreon/PK11b.jpg" alt="Phantom
Kid layout" width="155" height="220">
</a>
<div>Phantom Kid pg<br>Layout 2</div>
</div>
我不是编码员，我只是使用了一个模板并弄清楚我需要进行哪些更改来构建我的网站，所以我不太擅长故障排除。而且，已经这么久了，我不再保留我所做的信息！学习。
！因此，当您提供建议时，请在描述中尽可能基本。=] !
预期结果： 这些图像将全部显示在同一行中，每个图像都带有标题。 实际结果：每张图片都是自己的一行，每张图片下方都有标题。
DIV导致了这种情况，但我不太明白为什么他们现在造成它，但以前不是。我检查了我的主.css b/c 我认为页脚 ID 或 DIV 类"内部"可能是基于主.css中的定义的原因，但我没有看到任何相关的宽度或边框定义(对我的眼睛)，但是当我删除每个图像和标题周围的 DIV 时，一切都跳到一行上。每个新的 DIV 标记都会开始一个新行。
该网站(w/it乱七八糟的画廊，我注释掉了所有旧画廊)：TheRealitycomics.com 一个 URL，您可以在其中按原样查看：http://therealitycomics.com/indexB.html(同样，这是所有内容都在 3 或 4 行中的页面，但现在只是一长列)。
尝试将其添加到您的main.css中。它应该设置您的图库部分，以便它连续显示四个项目(除非浏览器窗口宽度低于 800px，否则它将在一行中仅显示两个项目)。
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery > div {
width: 50%;
}
@media (min-width: 800px) {
.gallery > div {
width: 25%;
}
}
@Janne答案是最好的方法。但是，如果您不想使用.css文件(不推荐)，则可以内联样式：
<div class="gallery cf" style="display: flex; flex-wrap: wrap; flex-direction: row;">
<div style="flex-basis: 25%">
<a target="_blank" href="http://therealitycomics.com/images/Postcard.jpg">
<img src="http://therealitycomics.com/images/Postcard.jpg" alt="The Reality" width="155" height="220">
</a>
<div>How our Intraverse<br>connects</div>
</div>
<div style="flex-basis: 25%"> <!-- Other images -->
...
...
</div>
使用display-flex属性，您可以告诉容器它应该以单维方式放置元素，维度使用属性flex-direction("行"或"列")进行设置。使用属性flex-wrap您可以说容器当一个子项超过其容器的大小时该怎么做，wrap值，他的子项跳到另一行。
物业flex-basis只设置每个孩子的大小，25%每行得到4个孩子，33%得到3个孩子，等等......