无<TABLE>布局创建HTML数字键盘

Question

我想创建一个HTML的"数字键盘",像一些键盘上找到.我难倒就如何进行布局,而无需使用一个表.

我正在使用Bootstrap(v3.1.1),所以我的第一直觉是尝试使用它的col-类重现键盘上的4列键.这是尴尬的,虽然,我不能轻易得到的按钮的大小是不同层次的嵌套之间是一致的div容器.我失败了.

我知道我可以使用<table>基于布局的方法来轻松实现colspans和rowspans.但它并没有使用该表的布局,因为它显然不是表格数据觉得不对劲.

我试图通过使用CSS display属性的table*值来获得表的好处.这是比我第一次尝试清洁,我使用的类均高于引导那些我试图之前,使用更有意义.不幸的是,我才知道,display:table不支持合并单元格/行跨度.下面是该尝试的的jsfiddle.我试图假一rowspan对tall-keyS按使用height: 144px;但只是增加了全行的高度.

我放弃了,最终创建了一个布局<table>.这是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