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

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 grid，但我知道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 添加边距，以便列表项目符号正常显示。

这是我的 CSS 代码。

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