javascript - 如何对HTML javascripts明信片并排排序？

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

这是完整的代码：

<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>

最佳答案

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

.card{
  display: inline
}

这行会解决。但这可能会导致某些丑陋的设计，因此我建议使用flex。

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

还有更多选项可用于设计“灵活”流程，例如“正当内容/对齐项目”。
同样，我认为mohameddrira是正确的，并且您的{％endfor％}在代码中的错误位置上导致了一些麻烦。