html – 如果达到高度,css将元素移动到新列

概述我有一个列表,我想从中构建两列. 列表中可以包含可变数量的项目,但最大值. 8 我总是希望第一列有4个元素. 我已经尝试过列计数：2但是这对于不均匀的数字不起作用,因为第一行必须包含4个元素. .container { border: 1px solid red; width: 300px; height: 90px;} <div class="container"> <ul> 我有一个列表,我想从中构建两列.
列表中可以包含可变数量的项目,但最大值. 8

我总是希望第一列有4个元素.
我已经尝试过列计数：2但是这对于不均匀的数字不起作用,因为第一行必须包含4个元素.

.container {  border: 1px solID red;  wIDth: 300px;  height: 90px;}

<div >  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>  </ul></div>

解决方法 您可以使用display：flex：

ul {  List-style: none;  padding: 0;  margin: 0;  display: flex;  flex-direction: column;  flex-wrap: wrap;  wIDth: 300px;  height: 200px;}li {  height: 25%;}

<div >  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>  </ul></div>

总结

以上是内存溢出为你收集整理的html – 如果达到高度,css将元素移动到新列全部内容，希望文章能够帮你解决html – 如果达到高度,css将元素移动到新列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。