Html 如何在css中并排对齐4个容器？

我需要对齐12个按钮，以便顶部有4个按钮，侧面有3个按钮（12）。4x3 左上角（Div/Mult）和右上角（Add/Sub）还有2个按钮

我将包括HTML和CSS文档，如果您需要JS文档，请不要犹豫询问。 这就是我想要它的样子，我不知道该怎么办

Div/MultBtn Add/SubBtn

1 2 3 4（一直到另一边）

数学事实调整
#钮扣容器{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
钮扣{
显示：块；
保证金：0自动；
背景色：#262b2b；
边框样式：实心；
颜色：白色；
字体系列：开放式Sans，无衬线；
边界半径：5px；
}
吕布顿先生{
垫底：1米；
填料顶部：1米；
}
身体，
html{
身高：100%；
溢出：滚动；
溢出x：隐藏；
背景色：#262b2b；
}
身体{
溢出：隐藏；
}
#去{
背景色：#00d10d
}
乘法/除法


加减法


一级


二级


三级


四级


五级


六级


7级


八级


第9级


第10级


第11级


第12级
去

如果你想让某些东西浮动，你需要：

设置位置：相对位置

设置浮动：左

为什么每个div后面都有

标记？这应该是有效的：

#按钮容器{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
钮扣{
显示：块；
保证金：0自动；
背景色：#262b2b；
边框样式：实心；
颜色：白色；
字体系列：开放式Sans，无衬线；
边界半径：5px；
}
吕布顿先生{
垫底：1米；
填料顶部：1米；
浮动：左；
}
正文，html{
身高：100%；
溢出：滚动；
溢出x：隐藏；
背景色：#262b2b；
}
身体{
溢出：隐藏；
}
#去{
背景色：#00d10d
}

乘法/除法
加减法
一级
二级
三级
四级
五级
六级
7级
八级
第9级
第10级
第11级
第12级
去

“侧面3”你说的“侧面”是什么意思？@guest271314我是说垂直。我试图描绘它，但它删除了我的空间。抱歉，你有没有尝试过在容器内进行绝对定位？@Bindrid我对html和css非常陌生（我的朋友无法帮助我），我想制作一个web应用程序（因为我知道js），所以我不知道怎么做，我刚刚发布了我的答案。请随意复制粘贴源代码。它应该按预期工作。我刚刚将代码移到了snippet。你现在应该可以在stackoverflow上运行代码了。哦，对不起，我的错！非常感谢你！！我把你标记为正确答案！！谢谢大家!@ethanlee回答时stacksnippets处的渲染结果不等于OP处的图像？他显然希望将它们放在一行。@OP处的Michal图像是错误的，需要忽略吗？