Html 如何并排布置两个div元素

这似乎是最初级的HTML问题。我想这样布置一些div元素

但是当我尝试用HTML这样做的时候

.外容器{
边框：8px实心红色；
}
.我的头{
/*边框：4px纯蓝色*/
显示器：flex；
字号：中等；
弯曲方向：立柱；
}
.我的那一排{
边框：3倍纯色橙色；
弯曲方向：行；
}
.我的行标签{
花边：2片实心兰花；
弯曲方向：立柱；
}
.我的行值{
边框：2倍固体石灰；
弯曲方向：立柱；
}
头衔
一排
值1
第2排
价值2

此处
你必须使用

网格行

和

网格列

如果你学会了这些，那么制作这种布局很容易

.container{
显示：网格；
边框：2件纯黑；
网格模板行：自动；
网格模板柱：1fr 1fr；
网格间距：5px；
填充物：5px；
}
.货柜组{
最小高度：50px；
边框：1px纯黑；
}
.box1{
格构柱：跨度2；
}

---

有两种方法。可以使用CSS网格，也可以使用FlexBox

CSS网格： 您预定义了一个网格。在这种情况下，有两列

网格模板列：重复（2，1fr）。标题通过使用
网格列跨越整个宽度：span 2


正文{
保证金：0；
填充物：5px；
显示：网格；
网格模板列：重复（2，1fr）；
网格自动行：自动；
网格间距：5px；
}
div{
边框：1px纯黑；
填充物：5px；
}
#标题{
最小高度：30px；
格构柱：跨度2；
}
.内容{
最小高度：50px；
}

标题
内容1
内容2
内容3
内容4
您必须在行上设置display flex。这里有一把小提琴展示了这一点：我建议您进行编辑，修复网格并将CSS代码缩短2/3。如果添加了更多的内容框，则允许其工作。@tacoshy感谢您的时间和努力。你能在这种高级css网格上与我分享一些文档或youtube视频吗？不是真正的高级css网格。只是一个普通的css网格保持简单和简短。您不需要声明它的精确列位置，它们会自动对齐。您只需告诉标题跨越两列，即
grid column:span 2然后，您不需要列出您拥有的每个框，如
box1、box2、box3…
。他们有一个共同点，他们都是
.container
的孩子。因此，您可以使用
.container div
对它们进行寻址。无需列出所有内容。最后但并非最不重要的一点是，网格项不需要边距。这就是网格间距，也是网格容器的填充。完整指南：Firefox文档：向行容器添加
class=flex
符合我的要求，谢谢。