html - 我试图以 3x3 格式放置 9 张图像以完美排列

Question

IM 试图在我的网站上创建一个 3x3 的网格，其中有 9 个图像，下面有文字。前 6 张图片看起来和我想要的一样，但是当我添加最后 3 张图片时，第一张图片跳到第二行的第三张图片下方，而最后两张图片向下移动。

这是一个 fiddle :https://jsfiddle.net/jbbj1e6q/

html:

<div class="member bordadd"> <img class="img-responsive img-thumbnail fixsamesize" src="http://www.aphhorses.se/wp-content/uploads/2017/05/Bacau.jpg" alt="Responsive image" /> <div class="name"><span>Bacau du rouet</span></div>

Answer 1

我认为那是因为文本的长度，如果内容相同则不会有问题，我建议将所有文本包含在一个层的宽度和高度中，以使所有框的宽度都一样相同的高度.. 并将内容调整到该层或制作一些脚本以在悬停或某些情况下显示内容