javascript - 如何并排排序 html javascript 明信片？

Question

我有一个 html 明信片代码，如 this ，如何将卡片排序到一边？我的意思是并排..

这是完整的代码:

<main class="main-area">

        <div class="centered">

            <section class="cards">
              {% for post in paginator.posts %}

                <article class="card">
                    <a href="{{ post.url | prepend: site.baseurl }}">
                        <div class="card-content">
                            <h2>{{ post.title }}</h2>
                        </div><!-- .card-content -->
                        <picture class="thumbnail">
                            <img src="https://d4mucfpksywv.cloudfront.net/research-covers/science-of-ai/gradient.jpg" alt="A banana that looks like a bird">
                        </picture>
                    </a>
                </article><!-- .card -->
            </section><!-- .cards -->
           {% endfor %}
        </div><!-- .centered -->

    </main>

Answer 1

我看不到你的CSS，但文章标签的默认CSS是“block”。这就是明信片垂直对齐的原因。

.card{ 
  display: inline
}

这一行可以解决这个问题。但由于这可能会导致一些丑陋的设计，我建议使用 flex。

.cards{
  display: flex;
  flex-flow: row wrap;
}

还有更多选项可以设计“flex ”流程，例如“justify-content/align-items”。 另外，我认为 mohameddrira 是对的，您的 {% endfor %} 位于代码中的错误位置，导致了一些麻烦。