Question

我想做一个适合很多div的盒子，比如我有一个盒子，里面有水平对齐的div

如果它不适合，它会再次水平堆叠

我如何制作那种东西？

Answer 1

您可以使用 Flexbox（here's 一篇很棒的文章，可以帮助您入门）。

您可以在元素到达其父容器的末尾时“包装”它们。运行以下代码时尝试更改屏幕大小，看看这些框如何移动到下一行。

<!DOCTYPE html>

<html>
  <head>
</head>
<body>
    <div class="card">
    <div class="card-body">
      <form method="post">
      <textarea class="form-control" rows="5" name="user_csv"></textarea>
      <button class="btn btn-success mt-2">Render CSV</button>
     </form>
     <div class="mt-4">
         {% if request.method == 'POST'%}
           <table id="proxies" class="display table nowrap responsive" style="width: 100%">
            <thead>
            <tr>
              {% for header in results[0].keys() %}
                <th>{{header}}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for row in results %}
              <tr>
                {% for index in range(0, len(fieldnames)) %}
                  <td>{{row[fieldnames[index]]}}</td>
                {% endfor %}
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
    </div>
  </div>
  </div>
</body>
<script type="text/javascript">
$('#proxies').DataTable();
</script>

</html>

.parent{
  border: 2px solid black;
  padding: 10px;
  
 /* these two are the important bits */
 display: flex;
 flex-wrap: wrap;
}

.child{
border: 1px solid red;
margin: 2px;
width: 300px;
height: 300px;
}

如何将多个 div 放入一个盒子中？

1 个答案: