创建没有 <table> 布局的 HTML 数字小键盘

Question

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

我正在使用 Bootstrap (v3.1.1)，所以我的第一反应是尝试使用它的 col- 类来重现键盘上的 4 列键。虽然这很尴尬，但我无法轻松地让按钮的大小在嵌套 div 容器的不同级别之间保持一致。我很快就失败了。

我知道我可以使用基于<table> 的布局通过colspans 和rowspans 轻松完成此任务。但是为此使用表格布局感觉不对，因为它显然不是表格数据。

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

我放弃并最终使用<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

---

编辑：

如果它必须是响应式的，您可以使用 calc 和百分比来调整宽度：

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

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

JSFiddle