在同一行中添加多张卡片

Question

我有这个电影应用程序在Spring，我想显示5电影卡在同一排。这就是我现在拥有的：

<div class="my-4 card-columns">
    <div class="card" th:each="movie : ${listMovies}">
        <a th:href="@{/movie/{id}(id=${movie.id})}">
            <img class="card-img-top"
                 th:src="${movie.photosImagePath}"/>
        </a>
        <div class="card-body">
            <h5 class="card-title" th:text="${movie.movieTitle}"></h5>
            <p class="card-text" th:text="${movie.movieGenre}"></p>
        </div>
    </div>
</div>

这是它在本地主机上的样子:8080

​

​

Answer 1

以下CSS代码应该工作得很好：

​

.card-container{
            display: flex;
            gap: 10px; /*This feature may not work for all browsers*/
            width: 100vw; /*this is 100% percent of the screen viewable width*/
        }
        .card{
            flex-grow: 1;
        }

​

只需确保相应地命名类以匹配css中的类！