javascript - 用css样式在Div中显示循环数据

Question

我在 jsp 中遵循代码，其中 ModelData 是 List< Entry< String, Integer>>

<div style="width:20px; float:left";>
<c:forEach items="${ModelData}" var="map">
    <c:forEach items="${map.value}" var="entry"> 
       <c:out value="${entry.key}"/>: <c:out value="${entry.value}"/>  
    </c:forEach>
</c:forEach>
</div>

上面的代码显示如下:

word1: 123
word2: 122
word3: 108
word4: 78
word5: 60
word6: 50
word7: 50
word8: 45
word9: 45
word10: 8

但我希望它显示如下，最多 4 列，最少 5 行。

word1: 123   word4: 78  word7: 50  word10: 8
word2: 122   word5: 60  word8: 45
word3: 108   word6: 50  word9: 45

这必须根据循环中的元素调整其高度。

我该怎么做。请帮助我。

我这里有这样的结构

<div>
 <div>
  <ul>
   <li></li>
  </ul>
 </div>

 <div>
 --my shown code here --
 </div>
</div>

Answer 1

body {
height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

div {
flex-basis: 33.33%;
}

<div>
word1: 123
</div>
<div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div><div>
word1: 123
</div>

试试这个 CSS:

height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;

将此 css 应用于父元素。

flex-basis: 33.33%;

将此 css 应用于子元素。