Html 如何将大尺寸按钮放在小尺寸按钮旁边？

我想做一个基本的计算器

但是我在造型上有问题

我希望我的“清除”按钮变大，并按如下方式放置：

+---+---+---+---+-+
|BTN|BTN|BTN|BTN|C|
+---+---+---+---|L|
|BTN|BTN|BTN|BTN|E|
+---+---+---+---|A|
|BTN|BTN|BTN|BTN|R|
+---+---+---+---|B|
|BTN|BTN|BTN|BTN|T|
+---+---+---+---|N|
|BTN|BTN|BTN|BTN|!|
+---------------+-+

看起来很容易，但已经试了一个小时了

我该怎么做呢

这是我的html：

试试这个：

。按钮{
显示：内联块；
浮动：左；
}
.btnLine input.button{
高度：30px；
利润率：0 5px 10px 0；
}
.大btn{
显示：内联块；
左边距：10px；
}
.大btn输入按钮{
高度：230像素；
}

使用Flex box：

计算器{
显示器：flex；
对齐项目：拉伸；
}
.按钮{
显示器：flex；
}
.btnLine input.button{
显示器：flex；
}
.clear{
边框：1px纯灰；/*重写标准样式，需要能够更改大小*/
}

---

谢谢。关键是“浮动”。@zxxzyz<代码>浮动在这里是不相关的，可能会导致许多错误并导致意外行为。有一个伟大的属性

flex

不久前介绍了这样的东西。