Html div的第二个子元素应保持不变

我在一个父分区中有3个分区。请看图片，这样会有更好的想法

#父级{
边框：1px纯红；
高度：150像素；
宽度：250px；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
#容器{
显示器：flex；
证明内容：中心；
字体大小：12px；
边缘顶部：10px；
}
#集装箱1{
显示器：flex；
证明内容：中心；
字体大小：12px；
} 
.fnt{
字体大小：400；
字体大小：1.5rem；
线高：2.4rem；
}

500
/
20
我的任务
/
总任务

要使宽度一致，可以使用网格，如下所示

#父级{
边框：1px纯红；
高度：150像素；
宽度：250px；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
#容器{
显示器：flex；
证明内容：中心；
字体大小：12px；
边缘顶部：10px；
}
#集装箱1{
显示器：flex；
证明内容：中心；
字体大小：12px；
} 
.fnt{
字体大小：400；
字体大小：1.5rem；
线高：2.4rem；
文本对齐：右；/*左侧向右对齐*/
}
#父级>div{
显示：网格；
网格模板列：100px 10px 100px；/*分为3部分，中间是斜线，所以只需要小宽度*/
网格间距：5px；/*网格之间的距离*/
}
/*这是除.fnt以外的样式，请根据需要更改斜杠和右侧的样式*/
#父级>分区>分区：非（.fnt）{
字体大小：400；
字体大小：1.5rem；
线高：2.4rem；
}
#父级>分区>分区：最后一个子级{
文本对齐：左；/*右侧向左对齐*/
}

500
/
20
我的任务
/
总任务

您是否发布了两个相同的代码片段？将

/total task

移动到

span

中，并将其放置在

中.fnt

中，然后为其提供单独的css规则。您需要这样的结果吗？-@s、 库兹涅佐夫：是的，这是一个完美的选择。但有一个问题。看看斜线。两者都不一致。两个斜线位置都不应为空changed@pistevw在单独的css中，我可以把行高：unset！重要吗？那么“斜线”对齐又如何呢？我们可以用flex和flex-direction来实现吗。是的，你也可以用flex来做！我已经编辑了答案