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

时间：2018-12-01 11:23:13

标签： html css flexbox css-grid css-multicolumn-layout

我使用display: inline-block在5列中显示了一组div。

我希望他们像这样堆叠：

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>

如何使它们从上到下而不是从左到右堆叠？

2 个答案:

答案 0 :(得分：3)

您可以使用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>

这是没有使用column-count的JavaScript的替代方法，您可以在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的浏览器中使用def getFuzzyRep(arr): fuzzRep = "" x_qual = np.arange(0, 11, 0.1) qual_lo = fuzz.trimf(x_qual, [0, 0, 0.5]) qual_md = fuzz.trimf(x_qual, [0, 0.5, 1.0]) qual_hi = fuzz.trimf(x_qual, [0.5, 1.0, 1.0]) FuzzVals=["Low","Medium","High"] i =0 for val in arr: if i == 0: fuzzRep = FuzzVals[np.argmax([fuzz.interp_membership(x_qual, qual_lo, val),fuzz.interp_membership(x_qual, qual_md, val),fuzz.interp_membership(x_qual, qual_hi, val)])] else: fuzzRep = fuzzRep +","+FuzzVals[np.argmax([fuzz.interp_membership(x_qual, qual_lo, val),fuzz.interp_membership(x_qual, qual_md, val),fuzz.interp_membership(x_qual, qual_hi, val)])] i+=1 return fuzzRep 并使用Flexbox和一些JavaScript作为后备，则可以同时使用两种解决方案。

答案 1 :(得分：0)

尝试一下：

 
 .withchild {
   
   display: block;
    width: 200px !important;
    margin-left: 5px !important;
    margin-top: 5px !important;
    vertical-align: top;
    
   
 }
 
 .supermenu-left {
   display: inline-block;
 }
<div class="gridbox" style="width: 1200px;">
  <div class="supermenu-left">
    <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>
  <div class="supermenu-left">
      <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>
  <div class="addingaspace"></div>
</div>

相关问题
最新问题