html - 如何动态地将内容排列到 GridView 中？

Question

我想将下面的Figure1内容排列成水平 GridView ，这里的内容是垂直的，所以如何排列成水平 GridView ，如Figure2

图1:

图2:

这里我只需要div中的css类，请告诉css类将网格排列成水平形式。

Jinja2 模板

_data_grid.html
这个模板，需要行(数据的数量，如下图 2 我们有 5 个数据)和列(图像名称、类型、状态、公共(public)、 protected 、格式、大小、操作)，所有这些信息都来自数据库和 Django 框架。

{% load i18n %}
{% with table.needs_form_wrapper as needs_form_wrapper %}
    <div class="table_wrapper">
    {% if needs_form_wrapper %}<form action="{{ table.get_full_url }}" method="POST">{% csrf_token %}{% endif %}
        {% with columns=table.get_columns rows=table.get_rows %}   

            {% block grid %}
                <grid id="{{table.slugify_name}}">
                    <div>
                        {% block grid_caption %}

                            <h3 class='table_title'>{{ table }}</h3>
                            {{ table.render_table_actions }}

                        {% endblock grid_caption %}
                    </div>
                    </br>
                    </br>
                    </br>
                    </br>
                    {% block grid_body %}
                        <div>
                            {% for row in rows %}
                            {{ row.render }}
                            {% empty %}

                            {{ table.get_empty_message }}
                            {% endfor %}
                        </div>
                    {% endblock grid_body %}
                </grid>
            {% endblock grid %}
        {% endwith %}
        {% if needs_form_wrapper %}</form>{% endif %}
    </div>
{% endwith %}

_data_grid_cell.html
该模板用于填充内容，

{% if cell.inline_edit_mod and cell.update_allowed %}

{% else %}

{% if cell.inline_edit_available and cell.update_allowed %}

{% else %}

        <ul>{{ cell.value }}</ul>
{% endif %}
{% endif %}

Answer 1

如果你想自己编写 css flexbox将是你正在寻找的。但是使用像 Bootstrap 这样的 css 框架会更容易，也可能更干净。 ，你的代码应该看起来像这样，然后你可以添加 django 模板标签:

<div class="container">
  <div class="row">
      <div class="col-sm-4 col-md-4"><!--block 1--></div>
      <div class="col-sm-4 col-md-4"><!--block 2--></div>
      <div class="col-sm-4 col-md-4"><!--block 3--></div>
      <div class="col-sm-4 col-md-4"><!--block 4--></div>
  </div>
</div>

检查 ( Bootstrap Grid ) 以获得更多细节和 css 类的解释。