CSS - div中两个跨度的底部对齐方式

在CSS中，要实现div中两个跨度的底部对齐方式，可以使用Flexbox布局或者Grid布局来实现。

1. 使用Flexbox布局： Flexbox是一种用于创建灵活的、自适应的布局的CSS模块。以下是实现div中两个跨度的底部对齐方式的步骤：
2. 在父容器的CSS样式中，设置display为flex，使其成为一个Flex容器。
3. 设置flex-direction为column，使子元素垂直排列。
4. 设置align-items为flex-end，使子元素在垂直方向上底部对齐。

示例代码如下：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

1. 使用Grid布局： Grid布局是一种二维网格布局系统，可以更灵活地控制元素的位置和对齐方式。以下是实现div中两个跨度的底部对齐方式的步骤：
2. 在父容器的CSS样式中，设置display为grid，使其成为一个Grid容器。
3. 设置grid-template-rows为auto 1fr，其中auto表示第一个子元素的高度由内容决定，1fr表示第二个子元素占据剩余空间。
4. 设置align-self为end，使第一个子元素底部对齐。

示例代码如下：

.container {
  display: grid;
  grid-template-rows: auto 1fr;
}

.child1 {
  align-self: end;
}

以上是实现div中两个跨度的底部对齐方式的两种方法。根据具体情况选择使用Flexbox布局或Grid布局来实现。