3

私はこれらのプロパティ、特にdisplay: table-cellを最近よく使用しています。これは最新のブラウザーで十分にサポートされており、一部のグリッドや、複雑なマークアップを必要とせずにコンテンツを非常に簡単に配置するための多くの利点があります。しかし、この回答のように、これらの属性を使用するのは悪い習慣/アプローチであったため、ここ数日で人々がこれについて話しているのを見ました。

長所（今私の頭に浮かぶ）：

  • HTMLマークアップにセマンティクスを追加しません
  • 最新のブラウザで十分にサポートされています
  • コンテンツの整列に役立ちます
  • グリッドシステムに役立ちます (コンテンツの整列との組み合わせで最も可能性が高い)

短所

  • display: table-cell;不足している部分 (行とテーブル) を使用するだけで、自動的に追加されます

だから、レイアウトにそれらを使用するのがなぜ悪いのか、私にはよくわかりません。

この質問は締めくくられていると思います (それは理解できます) が、誰かが適切な答えを持っているかもしれません。

4

3 に答える 3

4

リンクされた回答からの引用：

table-cell は正しい使い方ではないことを忘れないでください。表のセルには表のデータのみを含める必要があるため、画像を表のセルとして扱いたくありません。注意フラグを立てるだけです。セマンティクスに固執します。

長くはなりませんが、CSS は単にセマンティクスとは何の関係もありません。

于 2012-08-09T22:20:32.690 に答える
1

1 つの良い点: テーブル要素を使用せずにテーブル レイアウトを提供します。1 つのマイナス: 一部のユーザー エージェントにマイナスの影響を与える : http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/

于 2012-08-10T20:02:16.780 に答える
1

私は必要に応じて表示と位置を設定するのが好きですが、ほとんどの場合、大きな要素はすべて設定するposition: relative;ので、それらの子をより簡単に処理できます。

についてはdisplay:table-cell、レイアウト方法を変更しているだけです。テーブル全体をコーディングする代わりに、きちんとした小さな 4x4 グリッドが必要な場合は、それを使用しないでください。これは非常に単純で、非常にクリーンで、大きな (乱雑な) テーブルをコーディングするための非常に単純な代替手段です。

私のアドバイスは、「壊れていなければ直すな」ということです。display:アイテムの表示方法を変更するだけです...表示されます〜フィギュアに行きましょう！

display:メニューが:inline-block;メディアクエリや:block完全な記事、または:table-cellサイドバー/記事のセクションにある素敵でシンプルな 2 列のビットのように、私は必要な数の を使用します。

于 2012-08-09T22:21:45.170 に答える