Question

我尝试了许多不同的方法，如何将它们彼此相邻显示，但是问题是它们仍然在页面的左侧/上方/下方显示，如何显示它们？彼此相邻，我要发布与posts.ejs文件相关的CSS部分。我想为此使用Grid或Flex！

admin.css

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}

.grid .post {
    border: 4px dashed #207420;
    text-align: center;
    border-radius: 10px;
    width: 200px;
    height: 200px;
    box-shadow: 4px 4px 4px 8px rgba(0, 0, 0, 0.26);
}

posts.ejs

    <main>
        <% if (posts.length > 0) { %>

        <% for (let post of posts) { %>

        <div class="grid">
                <article class="post">
                    <h1><%=post.title%></h1>
                    <p><%=post.description%></p>
                    <a href="/post/<%=post._id%>">See Post</a>
                <article>

        </div>

        <% } %>
        <%  } else { %>

        <h1>No Posts Found</h1>
        <% } %>
    </main>

Answer 1

这是因为您要为每个帖子创建带有类网格的div

Insead在带有类网格的div中使用for循环

  <main>
        <% if (posts.length > 0) { %>


        <div class="grid">

            <% for (let post of posts) { %>

                <article class="post">
                    <h1><%=post.title%></h1>
                    <p><%=post.description%></p>
                    <a href="/post/<%=post._id%>">See Post</a>
                <article>

            <% } %>
        </div>


        <%  } else { %>

        <h1>No Posts Found</h1>
        <% } %>
    </main>

CSS-如何将我的小模板帖子彼此相邻显示

1 个答案: