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

【问题标题】：CSS - How can I display my small template posts next to each otherCSS - 如何将我的小模板帖子彼此相邻显示
【发布时间】：2019-11-09 18:27:59
【问题描述】：

我尝试了许多不同的方式，如何将它们彼此相邻显示，但问题是它们仍然显示在页面左侧的上方/下方，我该怎么做才能显示紧挨着，我将发布与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>

【问题讨论】：

在你运行的代码中，你忘记结束文章了吗？ </article>?

标签： javascript css flexbox ejs css-grid

【解决方案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>

【讨论】：