html - CSS - 如何按垂直从上到下而不是从左到右对内联 block 进行排序？

Question

<分区>

Answer 1

您可以使用 flexbox 来做到这一点:

.parent {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

基本上，您使用 flex-direction: column 垂直堆叠元素，并使用 flex-wrap: wrap + height: 100vh 来制作当没有更多可用的垂直空间时，它们会换行。

然后您可以使用 align-items和 justify-content更改它们在两个轴上的对齐方式。

如果您希望始终具有相同的列数，在本例中为 5，但又不想使用 column-count ，您需要在元素上设置 width: 20%，然后假设它们都具有相同的 height，设置父项的 height使用 JavaScript 来匹配:

const parent = document.getElementById('parent');
const items = parent.children;
const rows = Math.ceil(items.length / 5);

parent.style.height = `${ items[0].offsetHeight * rows }px`;

body {
  margin: 0;
  font-family: monospace;
}

#parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border-bottom: 2px solid black;
}

.withchild {
  width: 20%;
  padding: 4px 8px;
  box-sizing: border-box;
  
  /* Always keep the text in 1 line: */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.withchild:hover {
  background: yellow;
}

<div id="parent">
  <div class="withchild">1</div>
  <div class="withchild">2</div>
  <div class="withchild">3</div>
  <div class="withchild">4</div>
  <div class="withchild">5</div>
  <div class="withchild">6</div>
  <div class="withchild">7</div>
  <div class="withchild">8</div>
  <div class="withchild">9</div>
  <div class="withchild">10</div>
  <div class="withchild">11</div>
  <div class="withchild">12</div>
  <div class="withchild">13</div>
  <div class="withchild">14</div>
  <div class="withchild">15</div>
  <div class="withchild">16</div>
  <div class="withchild">17</div>
  <div class="withchild">18</div>
  <div class="withchild">19</div>
  <div class="withchild">20</div>
  <div class="withchild">21</div>
  <div class="withchild">22</div>
  <div class="withchild">23</div>
  <div class="withchild">24</div>
  <div class="withchild">25</div>
  <div class="withchild">26</div>
  <div class="withchild">27</div>
  <div class="withchild">28</div>
  <div class="withchild">29</div>
  <div class="withchild">30</div>
  <div class="withchild">31</div>
  <div class="withchild">32</div>
</div>

这是不使用 JavaScript 的替代方案，使用 column-count ，您可以在 MDN 和 Can I use 上看到我认为在现代浏览器中有很好的支持(使用供应商前缀):

body {
  margin: 0;
  font-family: monospace;
}

#parent {
  border-bottom: 2px solid black;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}

.withchild {
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  
  /* Always keep the text in 1 line: */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 23px;
}

.withchild:hover {
  background: yellow;
}

<div id="parent">
  <div class="withchild">1</div>
  <div class="withchild">2</div>
  <div class="withchild">3</div>
  <div class="withchild">4</div>
  <div class="withchild">5</div>
  <div class="withchild">6</div>
  <div class="withchild">7</div>
  <div class="withchild">8</div>
  <div class="withchild">9</div>
  <div class="withchild">10</div>
  <div class="withchild">11</div>
  <div class="withchild">12</div>
  <div class="withchild">13</div>
  <div class="withchild">14</div>
  <div class="withchild">15</div>
  <div class="withchild">16</div>
  <div class="withchild">17</div>
  <div class="withchild">18</div>
  <div class="withchild">19</div>
  <div class="withchild">20</div>
  <div class="withchild">21</div>
  <div class="withchild">22</div>
  <div class="withchild">23</div>
  <div class="withchild">24</div>
  <div class="withchild">25</div>
  <div class="withchild">26</div>
  <div class="withchild">27</div>
  <div class="withchild">28</div>
  <div class="withchild">29</div>
  <div class="withchild">30</div>
  <div class="withchild">31</div>
  <div class="withchild">32</div>
</div>

无论如何，如果您更喜欢在支持它的浏览器中使用 column-count 并使用 Flexbox 和一些 JavaScript 作为后备，您总是可以混合使用这两种解决方案。