html - 如何获取循环中生成的元素并将它们放置在 flexbox 的页面上？

Question

我有一个页面显示多只待售宠物。填写表单后，使用循环将它们放置到页面上。现在，当我尝试将元素放入网格并让它们显示为每行 3 个元素时，它不起作用，而是它们都在一列中。如何从循环中获取元素以显示在网格中？

<% posts.forEach(function(post) { %>

<div class="flex-container">
    <div class="row justify-content-around">
        <div class="col-sm">
                <h1><%=post.name %></h1>
                <div><%=post.fee %></div>
                <div><%=post.description %></div>
                <div><%= post.location%></div>  
                <div><a href="/gallery/pet/<%=post.id %>">View More</a></div>
                <% }) %>

        </div>

    </div>

</div>

Answer 1

您的 CSS 类很可能把事情搞砸了。我整理了 HTML 的结构并使用 flexbox 来对齐 col-auto 类。

试试这个:

HTML:

 <div class="container">
        <div class="row">
           // for each in items do |item|
            <div class="col-auto">
                <h1>{item.name}</h1>
                <span>£ {item.price}</span>
                <span>{item.description}<span>
                <span>{item.location}<span>  
                <div>
                    <a href="#0">View More</a>
                </div>
            </div>
           // end loop
        </div>
    </div>

CSS:

.col-auto{
    display: block;
    margin: auto;
    width: 33%;
    border: 1px solid #ccc;
}

.row{
    display: flex;
    margin: 0 auto;
    width: 100vw;
    flex-direction: row;
}