创建一个没有布局<table> </table>的HTML数字键盘

Question

我正在尝试创建一个HTML'数字小键盘'，就像在某些键盘上找到的那样。我不知道如何在不使用表格的情况下进行布局。

我正在使用Bootstrap（v3.1.1），所以我的第一直觉是尝试使用其col-类来重现键盘上的4列键。这很尴尬，我不能轻易地让按钮的大小在嵌套div容器的不同级别之间保持一致。我失败了。

我知道我可以使用基于<table>的布局来轻松完成colspan和rowspan s。但是使用表格布局并不合适，因为它显然不是表格数据。

我尝试使用CSS display属性的table*值来获取表的好处。这比我第一次尝试更干净，我使用的类比我之前尝试使用的Bootstrap更有意义。不幸的是，我学到了display:table does not support colspan/rowspan。这是a JSFiddle of that attempt。我尝试使用rowspan伪造tall-key上的height: 144px;，但这只会增加整行的高度。

我放弃并最终使用<table>创建了布局。这是the JSFiddle。

有没有办法在不使用HTML <table>的情况下创建数字小键盘？

注意：键的高度可以是静态值（例如70px），但宽度不能。整个keypad的宽度是容器的可变百分比，因为响应。

Answer 1

通过使用浮动行为，您可以使用一堆内联块来创建它。每个块都浮动到右侧（因为大的垂直元素在右侧）。

因此，小键盘上的按钮位于左上角的HTML中。例如。第一个块是-按钮，后跟*，/，Num-Lock，+，依此类推。

为了制作一个双倍尺寸的垂直按钮，我附加了属性v2（您可以为此使用类，但我觉得不同），并制作一个双倍尺寸水平按钮，我附加了属性h2。

---

对于自适应布局，请向下滚动到编辑。

---

CSS：

container {
    width: 442px;
    border: 1px solid black;
    display: inline-block;
}

block {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: red;
    float: right;
}

block[v2] {
    height: 210px;
}

block[h2] {
    width: 210px;
}

HTML：

<container>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block h2=""></block>
</container>

JSFiddle

---

编辑：

如果必须有响应，您可以使用计算和百分比来使宽度适合：

block
{
    width: calc(25% - 10px);
    margin: 5px;
}

block[h2]
{
    width: calc(50% - 10px);
}

JSFiddle