如何使用响应式布局在列中显示列表项？

在响应式布局中将列表项显示为列

根据浏览器宽度垂直显示列表项的目标可以通过以下方式实现CSS3 列。操作方法如下：

使用 HTML，将列表项包装在

<div> 中。具有固定高度并使用column-count属性指定列数：

<div>

在CSS中，定义容器的高度并确保每个列表项以内联块方式显示：

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

当浏览器调整大小时，CSS3会自动调整列数并重新排列列表项以优化其显示。显示的具体列数将取决于可用宽度和列表项本身的宽度。

使用此技术，您可以实现响应式布局，其中列表项以垂直线显示，列根据浏览器大小动态调整。