Html 浮动DIV适合另一个DIV

我需要得到它，这样包含日期的div就位于完整卡片div的顶部，并扩展到卡片的全宽。目前它要低得多，并且没有扩展整个宽度

p{
字体大小：粗体；
字体系列：Arial；
}
#容器{
宽度：全宽；
}
.全卡{
浮动：左；
背景色：#d1ccff；
边界半径：25px；
边框：5px实心#404266；
利润率：10px；
填充：10px 30px 10px 30px；
宽度：150px；
高度：250px；
}
#事件{
字号：18px；
字体：斜体；
颜色：白色；
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
}
#标签{
字号：18px；
文本对齐：居中；
颜色：#000；
}
.追溯{
背景色：#404266；
边界半径：25px 25px 0px 0px；
最小宽度：150px；
高度：40px；
}
#日期{
字号：26px；
文本对齐：居中；
颜色：#fff；
}

1981年

伏地魔谋杀了莉莉和詹姆斯·波特


哈利波特

修改您的代码，向您展示如何完成此操作

.full\u card

元素上的

填充

影响了其中的所有内容，包括紫色日期“选项卡”。我注释掉了这个填充，这样标签就不会被向下向内推

默认情况下，

元素的顶部和底部都有

边距。如果不需要，您需要覆盖它-我添加了
margin:0
停止
#date
元素向下移动

由于我们在步骤1中删除了填充（

30px

两侧），我将

60px

宽度添加到

.full_card

元素，使其宽度达到

210px

宽度，然后将

30px

宽度添加到

事件
元素内的两侧

为了使紫色元素上的边框半径正常工作，我将

溢出：隐藏
添加到
.full\u card
（将内部任何内容“修剪”为其形状），并删除
.date\u back
元素上不需要的
边框半径
希望这有帮助


p{
字体大小：粗体；
字体系列：Arial；
}
#容器{
宽度：全宽；
}
.全卡{
浮动：左；
背景色：#d1ccff；
边界半径：25px；
边框：5px实心#404266；
利润率：10px；
/*填充：10px 30px*/
宽度：210px；/*增加60px*/
高度：250px；
溢出：隐藏；/*为radius添加了此选项*/
}
#事件{
字号：18px；
字体：斜体；
颜色：白色；
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
填充：0 30px；/*添加了此*/
}
#标签{
字号：18px；
文本对齐：居中；
颜色：#000；
}
.追溯{
背景色：#404266；
/*边界半径：25px 25px 0px 0px*/
最小宽度：150px；
高度：40px；
}
#日期{
字号：26px；
文本对齐：居中；
颜色：#fff；
边距：0；/*已添加此边距*/
}

1981年

伏地魔谋杀了莉莉和詹姆斯·波特


哈利波特

只需添加页边距顶部：0px；去你的约会班。那太好了！非常感谢。如果你要同样的东西，但要在卡片的底部贴上标签，会不会太麻烦？@Spencer很高兴能帮上忙！请花一秒钟进行投票，并将我的解决方案标记为已接受（带有复选标记），这样它可以帮助其他人。@Spencer只需从
中删除
高度
。满卡
元素将把
标签
元素放在底部齐平。我意识到，但最终的展示将是屏幕上的十几张这样的卡片。他们将从左向右跑，然后下降到下一行。因为这些应该代表实际的扑克牌，所以我希望有一个标准尺寸。@Spencer，这是有道理的。在这种情况下，我会添加一个硬编码的
height:110px
到
#event
元素，为所有卡片提供相同的描述文本空间。这会将
#标记向下推到底部。