Html 图片画廊赢得'；不要呆在格子里_Html_Css_Image_Gallery

Html 图片画廊赢得'；不要呆在格子里

html css image

Html 图片画廊赢得'；不要呆在格子里,html,css,image,gallery,Html,Css,Image,Gallery,我的目标是：制作一个基本的图像库，可以从浏览器打印成PDF格式，在8.5英寸x 11英寸的纵向布局中，以3col x 4行网格显示。图像URL和简短描述来自django应用程序，因此我不知道将查看多少图像，也不知道它们的文件名下面的代码基于它会生成一个图像库，其结果可以在此处显示为屏幕截图：我的问题是：有没有办法让盒子保持固定的网格？有些箱子被推开了，但我不知道为什么。如果有更好的解决办法，我希望你能给我指点谢谢 <!DOCTYPE html> <html> &

我的目标是：制作一个基本的图像库，可以从浏览器打印成PDF格式，在8.5英寸x 11英寸的纵向布局中，以3col x 4行网格显示。图像URL和简短描述来自django应用程序，因此我不知道将查看多少图像，也不知道它们的文件名

下面的代码基于

它会生成一个图像库，其结果可以在此处显示为屏幕截图：

我的问题是：有没有办法让盒子保持固定的网格？有些箱子被推开了，但我不知道为什么。如果有更好的解决办法，我希望你能给我指点

谢谢

<!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>


.浮箱{
显示：内联块；
宽度：150px；
高度：180像素；
保证金：1px；
边框：1px实心#73AD21；
}
.文本框{
字体大小：9px；
边框：1px纯蓝色；
}
第14节：附件
{inspection.inspectionfeedback\u set.all%}
{%if-inspectionfeedback.feedback\u image.path==“”%}
{%else%}
{{inspectionfeedback.feedback\u inspection\u item}
{%endif%}
{%endfor%}

您使用的是内联块，文本有时是3行、2行甚至4行。内联块试图将文本调平到“基线”，这反过来会弄乱网格

可能的解决办法：

使用

显示：块，和浮动：左等


使用表格
：(
使用flex-box
（如果您对css没意见的话）

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