html - Flex wrap 让一切都崩溃了

Question

我试图刮掉一些 div，但它们没有包装并从我的容器中取出

html:

<div class="anime-list">
            {% for anime in response_data %}
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url({{ anime['cover'] }});" alt="">
                </div>
            {% endfor %}
        </div>

我的CSS：

.anime-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #eee;
}

.anime-item {
    background-color: #000;
}

.anime-item div {
    width: 208px;
    height: 296px;
    border-radius: 10px;
    border-color: white;
    border-style: solid;
    background-size: cover;
}

我的html结尾是这样的

<div class="anime-list">
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4991.jpg);" alt="">
                </div>
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/4937.jpg);" alt="">
                </div>
            
                <div class="anime-item">
                    <div class="anime-cover" style="background-image: url(https://cdn.animeapi.com/images/anime/5009.jpg);" alt="">
                </div>
            
        </div>

但它最终看起来像这样

有什么办法可以解决吗？我试过使用flex-direction: row;, flex: 1 1 0;, display: inline-flex;. 我可以使用 img 标签使其工作，但我需要 div 因为我需要在调整图像大小时保持图像不失真。

Answer 1

你的模板是错误的，你没有关闭你的 div 类“动漫封面”，如果你修复那个 flex 应该按预期工作。