时间戳

首页 > 解决方案 > CSS - 如何在垂直上到下而不是从左到右对内联块进行排序？

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

问题描述

我有一组 div 显示在 5 列中，使用display: inline-block.

我希望它们像这样堆叠：

1 5
2 6
3 7
4 8

代替：

1 2
3 4
5 6
7 8

到目前为止我所拥有的：

#parent {
  width: 1200px; 
}

.withchild {
  display: inline-block;
  width: 200px;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
}
<div id="parent">
  <div class="withchild"> <a href="#">1</a > </div>
  <div class="withchild"> <a href="#">2 </a > </div>
  <div class="withchild"> <a href="#">3</a > </div>
  <div class="withchild"> <a href="#">4</a > </div>
  <div class="withchild"> <a href="#">5</a > </div>
  <div class="withchild"> <a href="#">6</a > </div>
  <div class="withchild"> <a href="#">7</a > </div>
  <div class="withchild"> <a href="#">8</a > </div>
  <div class="withchild"> <a href="#">9</a > </div>
  <div class="withchild"> <a href="#">10</a > </div>
  <div class="withchild"> <a href="#">11</a > </div>
  <div class="withchild"> <a href="#">12</a > </div>
  <div class="withchild"> <a href="#">13</a > </div>
  <div class="withchild"> <a href="#">14</a > </div>
  <div class="withchild"> <a href="#">15</a > </div>
  <div class="withchild"> <a href="#">16</a > </div>
  <div class="withchild"> <a href="#">17</a > </div>
  <div class="withchild"> <a href="#">18</a > </div>
  <div class="withchild"> <a href="#">19</a > </div>
  <div class="withchild"> <a href="#">20</a > </div>
  <div class="withchild"> <a href="#">21</a > </div>
  <div class="withchild"> <a href="#">22</a > </div>
  <div class="withchild"> <a href="#">23</a > </div>
  <div class="withchild"> <a href="#">24</a > </div>
  <div class="withchild"> <a href="#">25</a > </div>
  <div class="withchild"> <a href="#">26</a > </div>
  <div class="withchild"> <a href="#">27</a > </div>
  <div class="withchild"> <a href="#">28</a > </div>
  <div class="withchild"> <a href="#">29</a > </div>
  <div class="withchild"> <a href="#">30</a > </div>
</div>

我怎样才能让它们从上到下而不是从左到右堆叠？

标签： htmlcssflexboxcss-gridcss-multicolumn-layout

解决方案

你可以使用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的 ，使用 JavaScript 设置height父项的匹配那：

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 using 的替代方案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 作为后备，您总是可以混合使用这两种解决方案。

推荐阅读