html - レイアウトなしの HTML 数字キーパッドを作成する一部のキーボードに見られるような、HTML の「数字キーパッド」を作成しようとしています。テーブルを使用せずにレイアウトを行う方法に困惑しています。 私は Bootstrap (v3.1.1) を使用しているので、最初の本能は、そのcol-

Question

一部のキーボードに見られるような、HTML の「数字キーパッド」を作成しようとしています。テーブルを使用せずにレイアウトを行う方法に困惑しています。

私は Bootstrap (v3.1.1) を使用しているので、最初の本能は、そのcol-クラスを使用して、キーパッドにある 4 列のキーを再現しようとすることでした。divしかし、これは厄介で、入れ子になったコンテナーの異なるレベル間でボタンのサイズを一致させるのは簡単ではありませんでした。はやく失敗した。

s とs を使用すると、<table>ベース レイアウトを使用してこれを簡単に実現できることがわかっていました。しかし、明らかに表形式のデータではないため、これにテーブル レイアウトを使用するのは適切ではありませんでした。colspanrowspan

displayCSSプロパティのtable*値を使用して、テーブルの利点を得ようとしました。これは私の最初の試みよりもきれいで、使用したクラスは、以前使用しようとしていた Bootstrap のものよりも意味がありました。残念ながら、display:tablecolspan/rowspan をサポートしていないことがわかりました。これがその試行の 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

---

編集：

応答性が必要な場合は、calc とパーセンテージを使用して幅を合わせることができます。

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

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

JSFiddle