html中一个div中平均分三个盒子
html中一个div中平均分三个盒子，大小自适应，随着界面的大小而改变大小
1、截图展示
2.代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0; /* 重置默认的body边距 */
}
.container {
display: flex;
justify-content: space-between;
border: 3px solid #D4E3FC;
border-radius: 10px;
padding: 20px; /* 添加上下左右相等的边距 */
box-sizing: border-box; /* 让padding不会撑大容器 */
overflow: hidden; /* 用于清除浮动，防止子元素溢出 */
}
.box {
width: calc(33.33% - 20px); /* 三个盒子平分容器宽度，并留出间隙 */
box-sizing: border-box; /* 防止盒子宽度溢出 */
background-color: blue; /* 设置盒子颜色为蓝色 */
margin-bottom: 20px; /* 间隙的高度，可根据需要调整 */
}
.monitor {
height: 100px; /* 设置盒子高度 */
}
</style>
<title>Three Boxes in Container</title>
</head>
<body>
<div class="container" id="boxContainer">
<div class="box">
<div class="monitor">
<!-- 内容 -->
</div>
</div>
<div class="box">
<div class="monitor">
<!-- 内容 -->
</div>
</div>
<div class="box">
<div class="monitor">
<!-- 内容 -->
</div>
</div>
</div>
</body>
</html>
![[idea]idea连接clickhouse23.6.2.18](https://img-blog.csdnimg.cn/direct/07edc11b586c492b802ad06ff09a118c.png)
