Question

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

我想做的是，我希望它不是按字母顺序水平排列，而是希望按字母顺序垂直排列。如下图所示：

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

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

<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;
}

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

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>

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

1 个答案: