Question

我在jsp中跟随代码，其中ModelData是List＆lt;条目＆LT;字符串，整数＆gt;＆gt;

<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应用于子元素。

使用css样式显示Div中的循环数据

1 个答案: