如何水平对齐3个div和中间div的一个div底部

要水平对齐3个div和中间div的一个div底部，可以使用Flexbox布局或者CSS Grid布局来实现。

使用Flexbox布局：

1. 在父容器上应用display: flex;属性，使其成为一个Flex容器。
2. 将3个div和中间div的一个div作为Flex容器的子元素。
3. 给父容器添加justify-content: space-between;属性，使子元素在水平方向上平均分布，并且左右两端与父容器的边缘对齐。
4. 给中间div的一个div添加margin-top: auto;属性，使其自动向底部对齐。

示例代码如下：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.middle {
  margin-top: auto;
}

使用CSS Grid布局：

1. 在父容器上应用display: grid;属性，使其成为一个Grid容器。
2. 将3个div和中间div的一个div作为Grid容器的子元素。
3. 使用grid-template-columns属性设置3个div的宽度，可以使用相等的宽度或者使用网格自动布局。
4. 使用grid-template-rows属性设置中间div的一个div的高度，可以使用auto或者固定高度。
5. 使用grid-row属性将中间div的一个div放置在底部。

示例代码如下：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 可以根据需求调整宽度 */
  grid-template-rows: auto; /* 可以根据需求调整高度 */
}

.middle {
  grid-row: 2; /* 将中间div的一个div放置在第2行 */
}

以上是使用Flexbox布局和CSS Grid布局来实现水平对齐3个div和中间div的一个div底部的方法。这些布局技术在前端开发中非常常用，可以灵活地实现各种布局需求。