html - 先垂直对齐 div 元素，再水平对齐下一列

Question

<分区>

Answer 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>