需求: 实现list从上到下排列,一列三行;余下的另起一列。
效果直接运行html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
.container {
writing-mode: vertical-lr;
/* 内容从上到下垂直排列,下一垂直行位于上一行右侧 */
height: 180px;
/* 必须控制容器高度,宽度自适应 */
font-size: 0;
/* 子元素为行内块元素,需要设置父元素font-size为0,否则子元素会有间隙 */
background-color: lightcyan;
margin: 0;
padding: 0;
}
.container li {
display: inline-block;
/*必须设置为行内块,否则会水平排列*/
width: 100px;
height: 50px;
background-color: bisque;
text-align: center;
line-height: 50px;
writing-mode: horizontal-tb;
/* 这里必须改成水平,否则文字显示方向不对*/
margin: 0 10px 10px 0;