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 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 600px;
}

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

.box1 {
  background-color: red;
}

.box2 {
  background-color: green;
}

.box3 {
  background-color: blue;
}

.box4 {
  background-color: yellow;
}

这里使用了 Flexbox 布局，将 4 个 div 元素包裹在一个 container 容器中，使用 `display: flex` 将容器设置为 Flex 容器，使用 `flex-wrap: wrap` 让容器中的元素可以换行，使用 `justify-content: space-between` 将元素在主轴（横向）方向上平均分布，使用 `align-items: center` 将元素在交叉轴（纵向）方向上居中对齐。

每个 box 元素都设置了相同的宽度和高度，不同的背景颜色。这里不需要使用上下左右的定位属性，因为使用 Flexbox 布局就可以实现元素的自动排列和分布。