时间戳

首页 > 解决方案 > 有没有办法根据大小以正确的方式自动放置 div

html - 有没有办法根据大小以正确的方式自动放置 div

问题描述

我正在尝试制作一个图片库网站，所以我使用 Flask 作为后端来搜索数据库中的图像这里是代码。

应用程序.py

from flask import Flask
app = Flask('__name__')
.....
.....

@app.route('/')
def index():
    images = Image_Table.query.all()
    return render_template("index.html", images=images)

索引.html

{% 'extends base.html ' %}

{% block content %}
    {% for image in images %}
        <div class="gallery">
            <img class="image" src="{{ url_for('static', filename='photos/' + image.image_file) }}">
        </div>
    {% endfor %}
{% endblock %}

这是样式style.css

.gallery {
    display: grid;
    grid-templates-column: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
}

.gallery .image {
    width:100%;
}

所以我希望显示图像的方式是这样的 我希望图像显示的方式

但相反我得到了这个

我想要的风格

简而言之，我希望完成那些空白空间。

标签： htmlcsstwitter-bootstrap

解决方案

如果您不介意按列绘制图像，可以使用CSS column。

基本上你的 CSS 可以变成：

.gallery {
  column-width: 300px;
  column-gap: 10px;
}

.gallery img {
  width: 100%;
  margin-bottom: 10px;
}
<div class="gallery">
  <img src=" https://picsum.photos/200/80">
  <img src=" https://picsum.photos/200/100">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100">  
  <img src=" https://picsum.photos/200/300"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
  <img src=" https://picsum.photos/200/300">
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100">
  <img src=" https://picsum.photos/200/300">
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
</div>

clamp()如果您希望在计算列的宽度时更加流畅，您可以暂时使用：

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

CSS 函数将clamp()一个值限制在上限和下限之间。clamp()允许在定义的最小值和最大值之间的值范围内选择中间值。它采用三个参数：最小值、首选值和最大允许值。该clamp()函数可以在任何允许使用<length>, <frequency>, <angle>, <time>, <percentage>,<number>或<integer>的地方使用。

.gallery {
  column-width:300px;/* wherever clamp() is not supported */
  column-width: clamp(150px,30vw,300px);
  column-gap: 10px;
}

.gallery img {
  width: 100%;
  margin-bottom: 10px;
}
<div class="gallery">
  <img src=" https://picsum.photos/200/80">
  <img src=" https://picsum.photos/200/100">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100">  
  <img src=" https://picsum.photos/200/300"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
  <img src=" https://picsum.photos/200/300">
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100">
  <img src=" https://picsum.photos/200/300">
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/400">
  <img src=" https://picsum.photos/200/100"> 
  <img src=" https://picsum.photos/200/200">
  <img src=" https://picsum.photos/200/402">
  <img src=" https://picsum.photos/200/102">  
  <img src=" https://picsum.photos/200/302"> 
  <img src=" https://picsum.photos/200/301">
  <img src=" https://picsum.photos/200/201">
  <img src=" https://picsum.photos/200/401">
  <img src=" https://picsum.photos/200/101">
</div>

推荐阅读