如何在 Flask 中使用 for 循环水平显示卡片

Question

我正在使用 for 循环在卡片视图中显示汽车列表。但是，在使用 jinja 模板后，卡片开始垂直显示而不是水平显示。

Html代码：

{% for car in cars %}
        <div class="row">
            <div class="column">
                <div class="card">

                    <ul>
                        <li>Car Name: {{ car.ev_name }}</li>
                        <li>Manufacturer: {{ car.ev_manufacturer }}</li>
                        <li>Year:{{ car.ev_year }}</li>
                        <li>Battery Size: {{ car['ev_battery_size'] }} (Kwh)</li>
                        <li>WLTP range: {{ car['ev_range'] }} (Km)</li>
                        <li>Cost: €{{ car['ev_cost'] }}</li>
                        <li>Power: {{ car['ev_power'] }} (Kw)</li>
                    </ul>
                        <br>
                    <form action="/car_details/{{ car.key.name }}" method="post" class="filter_form">
                        <input type="submit" name="show_details" class="button-1" value="Details"/>
                    </form>

                </div>
            </div>
        </div>
        {% endfor %}

Css代码：

* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 100%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  width: 800px;
  height: auto;
  margin:auto;
  font-weight: 600;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 32%;
}

我希望卡片并排显示并自动调整宽度。谁能帮帮我？

Answer 1

尝试使用 flex 或 grid 而不是浮动。

这是我的处理方式..

.row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
    gap : 1rem
}

您只需为卡片设置样式即可。

如何在 Flask 中使用 for 循环水平显示卡片

How to display cards horizontally with for loop in Flask

html

css

jinja2