使 Django ListView 水平显示而不是垂直显示

Question

我刚开始学习 Django，我正在尝试在遵循教程 https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction 的同时显示一些博客。我有一个列表视图 class（如下所示）。但是，元素一个接一个地出现在单独的行上。

有什么办法可以解决这个问题，比如说，三个元素出现在一行上？我尝试使用

#all-blogs {
    display: inline-flex;
}

但这会使所有内容都显示在一行中。这是我的代码。

列表视图Class:

class BlogListView(generic.ListView):
    model = Blog
    context_object_name = 'all_blogs'
    paginate_by = 15

blog_list.html

<div id="all-blogs">
  {% for blog in all_blogs %}
    <div class="blog">
      <a href="{{ blog.get_absolute_url }}">
        <h1 class="blog-title">{{ blog.title }}</h1>
        <h1 class="blog-author">By: {{blog.author}}</h1>
        <p class="blog-published">{{blog.published}}</p>
        <p class="blog-description">{{blog.description}}</p>
        </a>
    </div>
  {% endfor %}
</div>

感谢任何帮助。提前致谢

Answer 1

您可以使用 css grid 来布置您的博客。 css 将 3 个博客组织成一行是：

#all-blogs{
  display: grid;
  grid-template-columns: auto auto auto;
}

然而，这不是响应式的，并且不会在不同的屏幕尺寸上正确组织。您可以在线查看如何使 grid 或 flexbox 响应。

使 Django ListView 水平显示而不是垂直显示

Make Django ListView display horizontal rather than vertical

css

django

frontend