首先垂直对齐divs元素，然后在下一列中水平对齐[重复]

【问题标题】：Align divs elements in vertically first and then horizontally in the next column [duplicate]首先垂直对齐divs元素，然后在下一列中水平对齐[重复]
【发布时间】：2020-03-30 19:20:41
【问题描述】：

如何垂直对齐元素，然后溢出到下一列（比如 20 行之后）并垂直对齐剩余的元素。要显示的列数应取决于屏幕的宽度。随着浏览器宽度的减小，列数应该会减少，而行高应该会增加。

下面给出的 HTML 将元素水平对齐并彼此相邻，然后溢出到下一行。我想做另一种方式，它应该在第一列中垂直添加元素，在添加一些 n 个元素之后，它应该移动到下一列并填充行并继续移动到下一个。

当前的 HTML 代码。

<!DOCTYPE html>
<html>

<head>
    <title>
        Title
    </title>
    </head>

<style>
.column {

    float: left;

}
</style>
<body >
<div style=" overflow: hidden; width: 80%;">

                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 0
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 1
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 2
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 3
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 4
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 5
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 6
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 7
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 8
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 9
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 10
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 11
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 12
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 13
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 14
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 15
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 16
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 17
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 18
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 19
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 20
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 21
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 22
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 23
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 24
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 25
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 26
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 27
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 28
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 29
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 30
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 31
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 32
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 33
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 34
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 35
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 36
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 37
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 38
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 39
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 40
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 41
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 42
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 43
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 44
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 45
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 46
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 47
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 48
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 49
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 50
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 51
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 52
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 53
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 54
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 55
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 56
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 57
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 58
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 59
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 60
					                         </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 61
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 62
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 63
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 64
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 65
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 66
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 67
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 68
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 69
					                          </div>
					                      </div>
					                      <div class="column" style="margin-top: 1em; ">
					                          <div style="width: 15em;  padding-right: 0.5em;">Box 70
					                          </div>
					                      </div>


                </body>

</html>

下面列出了当前输出和预期输出。在 html 代码 sn-p 中，列数根据浏览器的宽度动态变化。

【问题讨论】：

标签： html css


【解决方案1】：

但是我已经清理了代码，用一行代码替换了重复的 DIV 和 CSS 代码来控制元素之间的填充和间距，您可以只从一个位置更改值。

.column-container {
  column-width: 15rem; /* width of each column */
  column-gap: 1rem; /* increase gap between each column */
  width: 80%;
}

.column-container .column {
  margin-bottom: 1rem;
}
  <div class="column-container">
    <div class="column">Box </div>
    <div class="column">Box 1</div>
    <div class="column">Box 2</div>
    <div class="column">Box 3</div>
    <div class="column">Box 4</div>
    <div class="column">Box 5</div>
    <div class="column">Box 6</div>
    <div class="column">Box 7</div>
    <div class="column">Box 8</div>
    <div class="column">Box 9</div>
    <div class="column">Box 10</div>
    <div class="column">Box 12</div>
    <div class="column">Box 13</div>
    <div class="column">Box 14</div>
    <div class="column">Box 15</div>
    <div class="column">Box 16</div>
    <div class="column">Box 17</div>
    <div class="column">Box 18</div>
    <div class="column">Box 19</div>
    <div class="column">Box 20</div>
    <div class="column">Box 21</div>
    <div class="column">Box 22</div>
    <div class="column">Box 23</div>
    <div class="column">Box 24</div>
    <div class="column">Box 25</div>
    <div class="column">Box 26</div>
    <div class="column">Box 27</div>
    <div class="column">Box 28</div>
    <div class="column">Box 29</div>
    <div class="column">Box 30</div>
    <div class="column">Box 31</div>
    <div class="column">Box 32</div>
    <div class="column">Box 33</div>
    <div class="column">Box 34</div>
    <div class="column">Box 35</div>
    <div class="column">Box 36</div>
    <div class="column">Box 37</div>
    <div class="column">Box 38</div>
    <div class="column">Box 39</div>
    <div class="column">Box 40</div>
    <div class="column">Box 41</div>
    <div class="column">Box 42</div>
    <div class="column">Box 43</div>
    <div class="column">Box 44</div>
    <div class="column">Box 45</div>
    <div class="column">Box 46</div>
    <div class="column">Box 47</div>
    <div class="column">Box 48</div>
    <div class="column">Box 49</div>
    <div class="column">Box 50</div>
    <div class="column">Box 51</div>
    <div class="column">Box 52</div>
    <div class="column">Box 53</div>
    <div class="column">Box 54</div>
    <div class="column">Box 55</div>
    <div class="column">Box 56</div>
    <div class="column">Box 57</div>
    <div class="column">Box 58</div>
    <div class="column">Box 59</div>
    <div class="column">Box 60</div>
    <div class="column">Box 61</div>
    <div class="column">Box 62</div>
    <div class="column">Box 63</div>
    <div class="column">Box 64</div>
    <div class="column">Box 65</div>
    <div class="column">Box 66</div>
    <div class="column">Box 67</div>
    <div class="column">Box 68</div>
    <div class="column">Box 69</div>
    <div class="column">Box 70</div>
  </div>

【讨论】：

  • @G-Cyr 是的：developer.mozilla.org/en-US/docs/Web/CSS/column-gap
  • @TylerH 列间隙是我知道在列之间添加空间的唯一方法，另一种方法是什么？ developer.mozilla.org/en-US/docs/Web/CSS/column-gap
  • 您可能错过了一些对话，因为 cmets 现在已被删除。我的cmets都在回复G-Cyr，他说column-gap不存在。
  • @TylerH 哦，好吧，如果有人知道在不使用列间隙的情况下在列之间添加空间的更好方法，非常欢迎，我想学习新方法。
  • 谢谢你，它成功了。
【解决方案2】：

如果您定义了行数（例如示例中的 10），CSS-Grid 也可以管理：

.grid {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-auto-flow: column;
}
<div class="grid">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
  <div class="item">item 27</div>
  <div class="item">item 28</div>
  <div class="item">item 29</div>
  <div class="item">item 30</div>
  <div class="item">item 31</div>
  <div class="item">item 32</div>
</div>

【讨论】：

  • 行数或列数未定义，问题中只有列的宽度；)
  • 谢谢你，它成功了。
【解决方案3】：

尝试使用 CSS 列：

ul {
  -webkit-columns: 3;
  -moz-columns: 3;
      columns: 3;
}
<ul>
  <li><span>Box 1</span></li>
  <li><span>Box 2</span></li>
  <li><span>Box 3</span></li>
  <li><span>Box 4</span></li>
  <li><span>Box 5</span></li>
  <li><span>Box 6</span></li>
  <li><span>Box 7</span></li>
  <li><span>Box 8</span></li>
  <li><span>Box 9</span></li>
  <li><span>Box 10</span></li>
</ul>

【讨论】：

  • 如果要使用列CSS，还需要匹配op的要求：显示的列数应该取决于屏幕的宽度。随着浏览器宽度的减小，列数应该会减少，而行高应该会增加。
【解决方案4】：

dontnetnewbie 要求

要显示的列数应取决于屏幕的宽度。随着浏览器宽度的减小，列数应该会减少，而行高应该会增加。

你要找的是https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

您可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/column-width，这样列数将根据父级的宽度和为列设置的宽度进行调整。从 column-width 设置 Multi Column CSS 时不需要媒体查询。

body>div {
  column-width: 15em;
  margin: auto;
}
<h1 style="text-align:center"> run me in fullpage and resize window's width </h1>
<div style=" overflow: hidden; width: 80%;">
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 0
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 1
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 2
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 3
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 4
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 5
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 6
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 7
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 8
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 9
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 10
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 11
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 12
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 13
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 14
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 15
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 16
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 17
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 18
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 19
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 20
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 21
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 22
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 23
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 24
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 25
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 26
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 27
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 28
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 29
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 30
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 31
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 32
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 33
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 34
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 35
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 36
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 37
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 38
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 39
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 40
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 41
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 42
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 43
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 44
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 45
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 46
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 47
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 48
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 49
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 50
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 51
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 52
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 53
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 54
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 55
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 56
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 57
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 58
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 59
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 60
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 61
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 62
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 63
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 64
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 65
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 66
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 67
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 68
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 69
    </div>
  </div>
  <div class="column" style="margin-top: 1em; ">
    <div style="width: 15em;  padding-right: 0.5em;">Box 70
    </div>
  </div>


  </body>

  </html>

【讨论】：

  • 一个问题是你可以使用除百分比之外的任何 CSS 单位。
  • @OleksandrLunov 百分比表示已知列数，这不是要求的操作；)
【解决方案5】：

请改用FLEX。删除 css float:left 并用 css 创建一个容器类：

.container {
    height: 100vh;
    width: 50vw;
    /* margin: auto; */
    display: flex;
    flex-flow: wrap column;
    align-content: flex-start;
}

请务必根据您希望浏览器的宽度/高度更改来调整宽度/高度的百分比。在这个例子中，宽度是浏览器宽度的 50%，高度是浏览器高度的 100%。

这里有一个关于 flex 的优秀指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是结果代码：

<!DOCTYPE html>
<html>

<head>
    <title>
        Title
    </title>
    </head>

<style>


    .container {
        height: 100vh;
        width: 50vw;
        /* margin: auto; */
        display: flex;
        flex-flow: wrap column;
        align-content: flex-start;
    }   

</style>
<body >
<div class="container">

                      <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 0
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 1
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 2
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 3
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 4
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 5
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 6
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 7
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 8
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 9
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 10
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 11
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 12
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 13
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 14
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 15
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 16
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 17
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 18
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 19
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 20
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 21
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 22
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 23
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 24
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 25
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 26
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 27
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 28
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 29
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 30
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 31
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 32
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 33
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 34
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 35
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 36
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 37
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 38
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 39
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 40
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 41
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 42
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 43
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 44
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 45
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 46
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 47
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 48
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 49
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 50
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 51
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 52
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 53
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 54
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 55
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 56
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 57
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 58
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 59
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 60
                                             </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 61
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 62
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 63
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 64
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 65
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 66
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 67
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 68
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 69
                                              </div>
                                          </div>
                                          <div class="column" style="margin-top: 1em; ">
                                              <div style="width: 15em;  padding-right: 0.5em;">Box 70
                                              </div>
                                          </div>


                </body>

</html>

【讨论】：

  • 请注意，这需要固定高度...否则不起作用。
  • 操作要求： - 要显示的列数应取决于屏幕的宽度。随着浏览器宽度的减小，列数应该减少，行高应该增加。 - 列数和高度是流动的，而不是固定的 ;)
  • 试试这个 css .container { height: 100vh;宽度：50vw；显示：弯曲； flex-flow：换行；对齐内容：弹性开始； }
  • 一定要删除css溢出：隐藏；宽度：80%； html内联样式的
猜你喜欢
  • 2014-01-23
  • 2020-10-21
  • 2012-05-06
  • 2015-07-15
  • 2012-10-10
  • 2012-04-03
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode