html中一个div中平均分三个盒子

骨子里的偏爱2023-12-10 9:45

html中一个div中平均分三个盒子

html中一个div中平均分三个盒子，大小自适应，随着界面的大小而改变大小
1、截图展示

2.代码部分

bash 复制代码

<!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>