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

你的模板是错误的，你没有用“anime-cover”类关闭你的div，如果你修复了那个flex应该按预期工作。