0

2つのページがあります。1つはdiv'sとCSSで作成され、もう1つは悪名高い。で作成されていtableます。

CSSページ...

...そしてテーブルページ。

一見、それらはかなり似ています。どちらも、丸みを帯びた「ボタン」の2x2グリッドを備えており、周囲のウィンドウに基づいてサイズが変更されます。

さて、これを携帯電話の文脈に置いてください。そうです、その結果フレームを縮小します（水平方向では、垂直方向について心配する必要はありません）。

もともと私はCSSバージョンを持っていましたが、文字列の長さが異なるため、左側のテキストが2行になり、右側のテキストが1つになる特定のブラウザ幅があります。実際の文字列では、ほとんどの電話の解像度がこの厄介な状況を引き起こします。

ただし、テーブルは予想どおりに動作します。このテーブルには「行」と「列」の概念があるため、列は整列されたままになり、1つの行のセルの高さが高くなるため、残りのすべても同様になります。

CSSでこの動作を模倣する方法はありますか？私は、アクセシビリティなどにとってテーブルがどれほど悪いかを常に言われています。そして、私は<table>レイアウトではなく、データの実際のテーブルを保持するのが好きです。

隣接セレクターについては知っていますが、「最小の高さを私の高さと同じにし、その逆も同様」と言う方法が見つかりませんでした。

また、明らかにこれはスクリプトで実行できます。しかし、ここの誰かがこの問題について情熱的に感じていない限り、javascript > CSS && javascript > TableCSSに固執しましょう。

4

2 に答える 2

1

今日のすべての正常なブラウザはdisplay: table/table-row/table-cell/...、HTMLマークアップに触れることなく、divを素敵なテーブルに変換するプロパティをサポートする必要があります。

変換されたコードは次のとおりです。

http://jsfiddle.net/eU6Xe/5/

HTML：

<div id="main">
    <div class="row">
        <div class="button">
            Some text here
        </div>

        <div class="button">
            And more text here
        </div>
    </div>

    <div class="row">
        <div class="button">
            More Text
        </div>

        <div class="button">
            Lots of text here
        </div>
    </div>
</div>

CSS：

div #main {
    display: table;
    width: 100%;
}

div.row {
    display: table-row;
}

div.button {
    display: table-cell;
}

​
于 2012-07-10T22:13:49.947 に答える
0

正直なところ、両方のバージョンにアクセスすることはできず、どちらも同じように使用するのが面倒です。

何よりもまず：sまたはを使用しないのはなぜですか？<button><input type="button">

両方のデモで意味的に正しくありません。テーブルは、データを保持する以外のことを行うためのものではありません。フォームの送信/キャンセル/クリアにはボタンを使用する必要があります。A<div>は、最後の手段として使用する、ジャンクドロワーに保持しているwhatchamacallitです。

テーブル方式

テーブルにアクセスできるようにする方法はありません。常にテーブルとして見られますが、これは誤って使用されているため、WAI-ARIAの役割をpresentation使用する必要があります。ただし、これは支援技術に、それがテーブルであるという事実を無視するように指示し、したがって単語をまとめます。セルをクリック可能にする唯一の方法は、onClickを使用することです。これは、ATおよびonClickの作成方法によっては自動的に起動される場合があります。したがって、人がそれを通り抜けることを許可せず、彼らはそれがテーブルであることを知らないので、彼らはそれを飛び越えることができません。

CSSメソッド

まず、<h2>要素が正しく使用されていません。ページ階層に寄与するページのセクション<h2>を示すためのものであり、ボタンが階層の一部になることはほとんど意味がありません。次に、デフォルトではフォーカスを受け取りません。第三に、onClickをにアタッチすると、上記と同じ問題が発生します。<div><div>

ARIAを使用すると、<div>sをボタンのように動作させることができますが、コードは次のようになります。

<div class="left-col">
 <div class="button" tabindex="-1" role="button">
  Some text here
 </div>
 <div class="button" tabindex="-1" role="button">
  And more text here
 </div>
</div>

また

<input type="button" value="some text here" />
于 2012-07-11T13:05:33.010 に答える