如何将内容动态排列到网格视图中？答案

【问题标题】：How to arrange content into grid view dynamically?如何将内容动态排列到网格视图中？
【发布时间】：2015-07-15 01:46:33
【问题描述】：

我想把下面的Figure1内容排列成水平网格视图，这里的内容是垂直的所以，如何排列成水平网格视图，比如Figure2

图1：

图2：

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

Jinja2 模板

_data_grid.html
这个模板，需要行（数据的数量，如下图 2 中我们有 5 个数据）和列（图像名称、类型、状态、公共、受保护、甲酸盐、大小、操作），所有这些信息都来自数据库和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 %}

【问题讨论】：

标签： html css django jinja2

【解决方案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 类的详细信息和解释。

【讨论】：