本文主要是介绍html中一个div中平均分三个盒子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>这篇关于html中一个div中平均分三个盒子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
