[CSSチュートリアル]css display table adaptive height, widthの問題解決

定義と使用方法

は

display 属性は、その要素が生成するボックスの種類を指定する。

説明

この属性は、レイアウトを構築する際に要素が生成するディスプレイボックスの種類を定義するために使用されます。HTML のような文書タイプでは、不用意に display を使用すると、HTML で既に定義されている表示階層に違反する可能性があり、危険です。XMLの場合、XMLにはそのような階層が組み込まれていないため、すべての表示が絶対に必要です。
可能な値

<テーブル 値 説明 なし この要素は表示されません。 ブロック この要素はブロックレベル要素として表示され、この要素の前後で改行されます。 インライン デフォルト。この要素はインライン要素として表示され、要素の前後で改行されることはありません。 インラインブロック インラインブロック要素。(CSS2.1で追加された値) リスト項目 この要素はリストとして表示されます。 ランイン この要素は、文脈に応じてブロックレベル要素またはインライン要素として表示されます。 コンパクト コンパクトという値は CSS に存在するが、広く支持されていないため CSS 2.1 からは削除された。 マーカー 値マーカーは CSS で利用可能でしたが、サポートが普及していないため、CSS 2.1 から削除されました。 テーブル この要素は table と同様のブロックレベルの表として表示され、表の前後で改行されます。 インラインテーブル この要素は table と同様のインラインテーブルとして表示され、テーブルの前後で改行されることはありません。 テーブル・ロー・グループ この要素は、tbodyと同様に1つ以上の行をグループ化して表示されます。 テーブルヘッダグループ この要素は、adと同様に1つ以上の行のグループ化として表示されます。 テーブル・フッター・グループ この要素は、tfootと同様に1つ以上の行をグループ化して表示されます。 テーブル行 この要素は、tr と同様にテーブル行として表示されます。 table-column-group（テーブルカラムグループ この要素は、1つ以上の列のグループ化としてcolgroupと同様に表示されます。 テーブル・カラム この要素は、colと同様のセル列として表示されます。 テーブルセル この要素は、td や th と同様にテーブルセルとして表示されます。 テーブル・キャプション この要素は、caption と同様にテーブルのキャプションとして表示されます。 継承 display属性の値を親要素から継承することを指定する。

display: table-cell が設定されている要素。

• 幅-高さに対してより敏感
• マージン値に反応しない
• padding属性に反応する
• コンテンツがオーバーフローしたときに親要素を自動展開する

上の画像は、左のヘッダーで float left 属性を、右のヘッダーで display: table-cell を使用して、2カラムのアダプティブ・レイアウトを実現しています。

display: table; 外側のレイヤーが幅と高さを定義し、内側のコンテンツが幅と高さに適応する。子要素がdivの場合、各列の幅が均等に分割されない。そこで、子要素はliタグを使うことが推奨されます。

css表示テーブル適応高さ、幅の問題については、この記事を紹介し、より関連するcss表示テーブル適応内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続し、私はあなたがより多くの将来のスクリプトハウスをサポートして願っています！.