如何在烧瓶中使用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而不是float。

以下是我的处理方法。

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

你所需要做的就是设计卡片的样式，你就完成了。