如何在特定编号后显示下一列中的内容。行？

Question

我正在使用这种代码来显示数据库中的项目：

<!-- HTML code-->
<%
    //rest of the java code
    while(rs.next())
    {
%>

    <p><%=rs.getString("item")%></p>

<%
    }
    //rest of the java code
%>
<!-- HTML code-->

我希望输出类似于图像，以便在5行之后项目名称移动到下一列。

我该怎么做？

Answer 1

您可以设置height来设置行数：line-height * numbersOfLineWanted + padding / margin应用于代码（请注意box-sizing）。< / p>

设置column-width值并将相同的width提供给元素。

ul {
  width:100px;
  -moz-column-width:100px;
  -webkit-column-width:100px;
  column-width:100px;
  height:6.5em;
}

/* demo show */
ul {
  border-left:solid;
  padding:0;
  counter-reset:lis;
}
li {
  display:block;
}
li:after {
  counter-increment:lis;
  content:' ' counter(lis);
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

---

或使用flex display：

ul {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:6.5em;
  width:0;
}

/* demo show */
ul {
  border-left:solid;
  padding:0;
  counter-reset:lis;
}
li {
  display:block;
  width:100px;
}
li:after {
  counter-increment:lis;
  content:' ' counter(lis);
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>