父容器宽度自适应
程序员文章站
2022-07-14 21:49:47
...
多项子元素垂直排列且折行，父容器宽度如何自适应。
方法一：display:inline-flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;/* 定义父容器高度 */
display: inline-flex;/* 定义为inline-flex */
flex-wrap: wrap;/* 设置换行，默认是不换行的 */
writing-mode: vertical-lr;/* 盒子从左开始垂直排列 */
background: lightcoral;
}
.container div {
width: 200px;/* 设置子元素宽度 */
height: calc(100% / 5);/* 定义子元素高度 */
writing-mode: horizontal-tb;/* 定义子元素水平排列，默认垂直排列 */
background: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
</div>
</body>
</html>
方法二：display:grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
display: grid;/* 定义为grid布局 */
grid-template-rows: repeat(5, 1fr);/* 不管高度多少都分为5行 */
grid-auto-flow: column;/* 定义网格中被自动布局的元素怎样排列 */
background: lightcoral;
position:absolute;/* 宽度自适应子元素，也可以float: left; */
}
.container div {
background: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
<div>斯为泰山而不骄</div>
</div>
</body>
</html>
此处子元素可设置宽高，若不设置，盒子宽高自适应内容。
上一篇： 在Linux系统中创建新用户