图片库不会留在网格中

Question

我的目标：制作一个基本的图片库，可以从浏览器打印为 PDF，作为 8.5" x 11" 纵向布局中的 3 列 x 4 行网格。图片 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>

Answer 1

您使用的是inline-block，文字有时是3行或2行甚至4行。 inline-block 试图将文本调平到 "baseline"，这反过来会弄乱你的网格。

可能的解决方案：

使用display: block;和float: left;等
使用 table :(
使用 flex-box（如果您对 css 满意）

图片库不会留在网格中

Image gallery won't stay in a grid

html

css

image

gallery