如何並排排序html javascripts明信片？

Question

我有這樣一個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>

Answer 1

我真的看不到你的 css，但是文章標簽的默認 css 是“block”。 這就是明信片垂直對齊的原因。

 .card{ display: inline }

這條線會修復它。 但由於這可能會導致一些丑陋的設計，我建議使用 flex。

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

還有更多選項可以設計“flex”流程，例如“justify-content/align-items”。 此外，我認為 mohameddrira 是對的，您的 {% endfor %} 位於代碼中的錯誤點，導致了一些麻煩。