Html 如何创建CSS卡？

这个问题可能有点宽泛。我正在尝试创建三张卡片和一个位于其上方的条形图，如下所示：

其中橙色部分为图像，灰色部分为文本

。蓝线{
高度：100px；
背景颜色：浅蓝色；
左边距：10px；
右边距：10px；
}
.卡片{
高度：400px；
宽度：300px；
背景颜色：灰色；
左边距：10px；
右边距：10px；
边缘顶部：20px；
}

---

您应该使用FlexBox，如下所示：

。蓝线{
高度：100px；
背景颜色：浅蓝色；
左边距：10px；
右边距：10px；
}
.卡片{
高度：400px；
宽度：300px；
背景颜色：灰色；
左边距：10px；
右边距：10px；
边缘顶部：20px；
}
.卡片容器{
左边距：10px；
右边距：10px；
显示器：flex；
}
.img{
高度：100px；
宽度：100%；
背景：#febe8c；
}

---

以下代码应该可以让您开始使用。您可以使用img标记或将图像作为背景图像（以您认为合适的为准）

。蓝线{
高度：100px；
背景颜色：浅蓝色；
左边距：10px；
右边距：10px；
}
.卡片{
高度：400px；
宽度：300px；
背景颜色：灰色；
左边距：10px；
右边距：10px；
边缘顶部：20px；
}
.卡片容器{
左边距：10px；
右边距：10px；
显示器：flex；
}
.img{
高度：200px；
宽度：100%；
背景：橙色；
}

你可以在这里输入你的文本
你可以在这里输入你的文本
你可以在这里输入你的文本

反馈：我对这个问题投了否决票，因为（a）这个问题的特点是紧急乞讨，直到我把它删掉，以及（b）我以前没有。记住，对你来说紧急的事情对其他人来说并不紧急。否则的假设是对志愿者时间的粗暴侵犯。我非常抱歉@halfer，我保证以后不再这样做。谢谢你的建设性批评！非常感谢您的帮助有办法将这些卡片居中吗？谢谢是，只需添加调整内容：中心；在容器中