Create an HTML Numeric Keypad without <table> layout

倾然丶 夕夏残阳落幕 提交于 2019-12-04 18:59:35

By using float behavior, you can create this with a bunch of inline-blocks. Each of the blocks are floated to the right (because the big vertical elements are on the right).

So the buttons on the numpad are placed in the HTML from the top right corner going left. E.g. the first block is the - button, followed by *, /, Num-Lock, +, and so on.

In order to make a double-sized vertical button, I attached the attribute v2 (you could've used classes for this, but I felt like being different), and to make a double-sized horizontal button, I attached the attribute h2.


For a responsive layout, scroll down to the edit.


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


Edit:

If it has to be responsive, you can use calc and percentages to make the widths fit:

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

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

JSFiddle

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!