HTML中4个div上下左右分布代码

以下是一种简单的实现 4 个 div 元素上下左右分布的方法：

HTML 代码：

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
  <div class="box box4">Box 4</div>
</div>

CSS 代码：

.container {
  width: 800px;
  height: 800px;
  position: relative;
}

.box {
  width: 200px;
  height: 200px;
  position: absolute;
}

.box1 {
  top: 0;
  left: 0;
  background-color: red;
}

.box2 {
  top: 0;
  right: 0;
  background-color: green;
}

.box3 {
  bottom: 0;
  left: 0;
  background-color: blue;
}

.box4 {
  bottom: 0;
  right: 0;
  background-color: yellow;
}

这里使用了绝对定位（`position: absolute`）来实现元素的上下左右分布。将 4 个 div 元素包裹在一个 container 容器中，使用 `position: relative` 将容器设置为相对定位，这样内部的绝对定位元素就可以相对于容器进行定位。每个 box 元素都设置了相同的宽度和高度，不同的背景颜色，通过 `top`、`bottom`、`left` 和 `right` 分别设置元素距离容器上下左右边缘的距离实现元素的定位。