图片库不会停留在网格中答案

【问题标题】：Image gallery won't stay in a grid图片库不会停留在网格中
【发布时间】：2016-01-25 05:30:15
【问题描述】：

我的目标：制作一个可以从浏览器打印为 PDF 的基本图片库，作为 8.5" x 11" 纵向布局的 3col x 4row 网格。图片 URL 和简短描述来自 django 应用程序，因此我既不知道将查看多少张图片，也不知道它们的文件名。

以下代码基于http://www.w3schools.com/css/css_inline-block.asp

它会生成一个图片库，其结果可以在此处作为屏幕截图看到：

我的问题：有没有办法让盒子保持在固定的网格中？一些盒子被推到了不合适的地方，但我不知道为什么。如果有更好的解决方案，我希望你能指出我。

谢谢！

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 180px;
    margin: 1px;
    border: 1px solid #73AD21;
}

.text-box {
    font-size: 9px;
    border: 1px solid blue;
}

</style>
</head>
<body>
    <div>
    <h3>Section 14: Attachments</h3>
        {% for inspectionfeedback in inspection.inspectionfeedback_set.all %}
                {% if inspectionfeedback.feedback_image.path == "" %}

                {% else %}
                    <div class="floating-box">
                        <img src="{{ inspectionfeedback.feedback_image.url }}" style="width:140px;" alt=" " >
                        <div class="text-box">
                            {{ inspectionfeedback.feedback_inspection_item }}
                        </div>
                    </div>
                {% endif %}
        {% endfor %}
    </div>
</body>
</html>

【问题讨论】：

标签： html css image gallery

【解决方案1】：

您使用的是 inline-block，文本有时是 3 行或 2 甚至 4 行。内联块尝试将文本调整为“基线”，这反过来又会弄乱您的网格。

可能的解决方案：

使用display: block;和float: left;等
使用table :(
使用flex-box（如果你对css没问题的话）

【讨论】：

我使用了您的前两个答案的组合这是解决网格问题的正确组合。显示：块；向左飘浮;但是，因为我最终要使用 PDF（打印页面），所以我还使用了表格结构，这使我能够消除图像和文本中间的分页符。感谢您的帮助！