Html 在另一个div的底部粘贴一个div

我正在尝试编写此设计的代码：

这是我的代码：

.container flex{
显示器：flex；
柔性流：行；
高度：100px；
}
.左{
弹性：1；
背景色：#2C77A5；
垫面：2%；
边框左上半径：6px；
高度：100px；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
}
.顶{
背景#27698D；
边框底部：1px实心#2a2a2a；
边框右上角半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：14px；
}
.中{
背景#27698D；
边框右下半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：16px；
}
塞莱斯特街{
身高：22%；
背景色：#8CE8FC；
}

Mejorar clima en finanzas
Poundación 33%
加州卡

这样可以吗

.集装箱伸缩件{
显示器：flex；
柔性流：行；
高度：100px；
}
.左{
弹性：1；
背景色：#2C77A5；
垫面：2%；
边框左上半径：6px；
高度：100px；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
}
.顶{
背景#27698D；
边框底部：1px实心#2a2a2a；
边框右上角半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：14px；
}
.中{
背景#27698D；
边框右下半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：16px；
}
塞莱斯特街{
身高：22%；
背景色：#8CE8FC；
}
塞莱斯特街{
身高：22%；
背景色：#8CE8FC；
底部：0；
位置：绝对位置；
宽度：100%；
}
Mejorar clima en finanzas
Poundación 33%
加州卡

您需要使用定位，请参见下面的示例：

.container flex{
显示器：flex；
柔性流：行；
高度：100px；
}
.左{
弹性：1；
背景色：#2C77A5；
垫面：2%；
边框左上半径：6px；
高度：100px；
位置：相对；/*必须设置为绝对定位元素的容器*/
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
}
.顶{
背景#27698D；
边框底部：1px实心#2a2a2a；
边框右上角半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：14px；
}
.中{
背景#27698D；
边框右下半径：6px；
宽度：42px；
高度：50px；
左侧填充：14px；
填充顶部：16px；
}
塞莱斯特街{
高度：22px；
背景色：#8CE8FC；
位置：绝对；/*这将使您的div位置根据其容器进行计算*/
底部：-19px；/*这会将其粘到底部*/
宽度：100%；
z指数：-1；
}

Mejorar clima en finanzas
Poundación 33%
加州卡

浅蓝色行不需要是div。它可以是蓝色边框

#框{
显示：内联flex；
弯曲方向：行；
边界半径：6px；
溢出：隐藏；
}
#左{
背景色：#0073a9；
边框底部：10px实心#6ebff；/*浅蓝色“条”*/
显示器：flex；
弯曲方向：行；
}
#左>*{
填充：10px 20px；
}
#左>*：不（：第一个子）{
左边框：1px纯黑；
}
#对{
背景色：#00688f；
显示器：flex；
弯曲方向：立柱；
字体大小：22px；
字体大小：粗体；
}
#右>*{
柔性生长：1；
弹性基准：0；
填充物：5px10px；
文本对齐：居中；
}
#右>*：非（：第一个孩子）{
边框顶部：1件纯黑；
}
.中心容器{
显示器：flex；
方向：世界其他地区；
证明内容：中心；
对齐项目：居中；
}
#省略号{
线高：30%；
}
* {
颜色：白色；
}
#左{
字体系列：sans，“ralway”；
}

Mejorar políticas de Lidelazgo
Poundación 40%

✔ 加利福尼亚
·
·
·
+

您可以使用flex box:justify content:space-between；伸缩方向：立柱；我们应该做到这一点。