Html 如何更改css以实现所需的布局？；

嗨，我正在设计一个博客网站使用纯html和css，我有一些设计的想法。目前它看起来像是前图，我想实现后图。现在所有这些类都在内联块中，我不想更改dom结构。请参阅此代码段以了解实现：

.container{
填充：10px 40px；
左侧填充：0px；
宽度：100%；
身高：100%；
}
梅塔先生{
位置：相对位置；
显示：内联块；
身高：100%；
宽度：10%；
最大宽度：200px；/*在大分辨率下并不总是希望宽度为12%*/
右边距：40px；
/*背景色：透明*/
填充：0px 10px；
文本对齐：右对齐；
垂直对齐：顶部；/*始终与容器顶部对齐*/
}
.内容{
宽度：30%；
显示：内联块；
填充：20px 30px；
背景色：白色；
位置：相对位置；
边界半径：10px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
垂直对齐：顶部；/*始终与容器顶部对齐*/
}

2020/12/09
22:18:35

tag1

tag2

标题
内容
内容
内容
内容
内容
内容

在这些情况下，最好的选择是使用flex属性。我向.container和.meta选择器添加了一些属性，并删除了一些属性，就像代码一样，以获得所需的结果

.container{
显示器：flex；
填充：10px 40px；
左侧填充：0px；
宽度：100%；
身高：100%；
}
梅塔先生{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：10%；
右边距：40px；
填充：0px 10px；
文本对齐：右对齐；
}
.内容{
宽度：30%；
显示：内联块；
填充：20px 30px；
背景色：白色；
位置：相对位置；
边界半径：10px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}

2020/12/09
22:18:35

tag1

tag2

标题
内容
内容
内容
内容
内容
内容

在flexbox中查找

.container

此网站上练习flex属性的最佳来源（）。在设计中使用flex，享受生活。