html - 有没有办法将不同高度的图像放入 HTML/CSS 中的 3 列中？

Question

我有很多来自某个来源(例如来自数据库)的图像。图像的数量和大小是任意的。我想将它们放在一个页面上，分为 3 列，如下所示:

但我得到的结果是:

我的 HTML 代码是(我使用 django 模板):

{% for photo in object_list %}
    <div class="photos-item"><img src="{{ photo.upload.url }}"></div>
{% endfor %}

CSS 是:

.photos-item {
    float: left;
    padding: 0.3em;
}

.photos-item img {
    width: 300px;
    box-shadow: 2px 2px 3px #888;
    cursor: pointer;
}

我的代码有什么问题？

Answer 1

也许是什么 like this有帮助吗？

网上有很多例子；您所要做的就是使用 css3 列布局，这在资源管理器中不起作用(显然)

---

<div id="columns">
    {% for photo in object_list %}
      <figure><img src="{{ photo.upload.url }}"></figure>
    {% endfor %}
</div>

CSS

#columns {
    column-width: 320px;
    column-gap: 15px;
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}

div#columns figure {
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px;
    padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
}

div#columns figure img {
    width: 100%; height: auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}