javascript - 具有动态行数和列数的表格，垂直排序

Question

我有一个问题。我有一个表，它动态地填充了来自 API 的标题。可以说它看起来像下图。

我想要做的是，与其按字母顺序水平排序，不如按字母顺序垂直排序。类似于下图:

此外，列数和行数在父容器内应该是动态的，因为我无法知道返回的元素数。此外，每个框的大小必须是动态的，因为我不知道每个元素的大小。

我添加了如下的 HTML 结构。 PS需要支持IE 11。

<div class="container">
<ul class="ulList"> 
    <li class="element">
        <div class="subelement">Aliquet justo orci </div>            
    </li>
    <li class="element">            
        <div class="subelement">Donec efficitur nibh</div>
    </li>
    <li class="element">
        <div class="subelement">Duis aliquam leo</div>            
    </li>
    <li class="element" >
        <div class="subelement">Duis aliquam leo id malesuada ultricies</div>            
    </li>
    <li class="element">
        <div class="subelement">Lorem </div>
    </li>
    <li class="element">
        <div class="subelement">Lorem  - ipsum dolor sit amet</div>
    </li>
    <li class="element">
        <div class="subelement">Mauris a dolor lacinia, sollicitudin justo</div>
    </li>
    <li class="element">
        <div class="subelement">Morbi dignissim ultricies orci</div>
    </li>
    <li class="element">
        <div class="subelement">Nullam at turpis at sem condimentum sodales ac</div>
    </li>
    <li class="element">
        <div class="subelement">Nulla facilisi</div>
    </li>
    <li class="element">
        <div class="subelement">Vestibulum scelerisque, est sed vestibulum interdum,</div>
    </li>
    <li class="element">  
        <div class="subelement">Vivamus</div>
    </li>        
    <li class="element">  
        <div class="subelement">Vivamus-tristique</div>
    </li>
    <li class="element">
        <div class="subelement">Vivamus-ultrices</div>
    </li>
</ul>

<ul class="ulList"> 
    <li class="element">
        <div class="subelement">Aenean</div>        
    </li>
    <li class="element">
        <div class="subelement">Aenean id magna vitae</div>     
    </li>
    <li class="element">
        <div class="subelement">Cras cursus est a urna </div>
    </li>
    <li class="element">
        <div class="subelement">Donec efficitur nibh sollicitudin</div>     
    </li>
    <li class="element" >
        <div class="subelement">Duis aliquam leo id</div>
    </li>
    <li class="element">
        <div class="subelement">Duis volutpat lacus at fermentum</div>      
    </li>
    <li class="element">
        <div class="subelement">Etiam ultricies nisl sit amet justo</div>
    </li>
    <li class="element">
        <div class="subelement">Fusce ex turpis</div>
    </li>       
    <li class="element">
        <div class="subelement">Morbi sit amet</div>
    </li>
    <li class="element">
        <div class="subelement">Nullam at turpis</div>
    </li>
    <li class="element">            
        <div class="subelement">Vestibulum</div>
    </li>
    <li class="element">
        <div class="subelement">Sollicitudin </div>
    </li>
    <li class="element">
        <div class="subelement">Vivamus</div>
    </li>   
    <li class="element">
        <div class="subelement">Vivamus ultrices enim eu turpis</div>
    </li>
</ul>

编辑:忘了说，我还希望每行的每个元素都具有相同的高度。所以，基本上，最高元素应该决定其余元素的高度。

编辑 2:添加了 css。

尝试过 css 网格，但我知道 IE11 不太喜欢它。此外，我需要指定行数...

.ulList {
border: solid 1px pink;
display: grid;
grid-template-rows: auto auto auto;
grid-gap: 2vw;
grid-auto-flow: column;
}

我也尝试过使用 flex，但如果不设置高度就无法让它工作......并且在元素退出父框时遇到问题

.ulList {
display: flex;
flex-flow: column;
flex-wrap: wrap;
height: 200px;
}

如上图所示，使用“columns = 4”的@Jenifer Jiang 解决方案，当文本分为两行时，每个元素的高度不同，我需要每一行的高度与最高元素的高度相同。

Answer 1

您可以使用属性 column-count 来设置您想要的列数。然后它会自动显示。并且注意li要加margin，这样list bullet才能正常显示。

这是我的 CSS 代码。

 <style type="text/css">
    .ulList {
        column-count: 4;
        column-gap: 2px;
        border: 1px solid red;
    }
    .element {
        margin-left: 2em;
    }
 </style>