1

3 列のレイアウトの作成方法:

  • 左の列は固定幅
  • 中央の列は自動幅 (固定されていません)
  • 右の列は固定幅

すべての列の高さが等しい(ただし、正確な高さは不明)

例：

例

テーブルまたは を使用して実行できることはわかっていますが、テーブルを使用display:table-cellせずに実行することは可能ですか? 私は行きますtable-cellが、古い ios/android モバイル デバイスや古いブラウザでは動作しません。

なしでそれを行うために利用できるCSSハックはありますtable-cellか?

編集：この特定のケースでは、フルハイトの色の背景を設定したいだけです（左：色＃A、中央：色＃B、右：色＃C）

編集 2: 1999 年のテーブル レイアウト ポルターガイスト/ゴーストが目の前で笑っているような気がします

Edit3: js を使用しないでください

4

4 に答える 4

1

これは興味深い質問です。リッチはすでに列を把握しているので、すべての列を「同じ高さ」にするという問題に取り組みます。あなたが言ったように、これはテーブルの動作なしでは非常に困難です。私が常に行ってきたことは、すべての列をラップする div で背景画像を使用することです。この div は、最も高い列の高さまで自動的に伸びます。繰り返しの背景がある場合は、列が一致しているように見えます。中央に流動的な幅を持つ 3 列の特殊なケースがあるため、3 列をラップするために 2 つの div が必要になり、2 つの背景画像が必要になります。1 つは左揃え、もう 1 つは右揃えです。意味がない場合はお知らせください。

于 2013-10-27T00:42:11.880 に答える
0

多分この変種：

display:block;
height:100px;
于 2013-10-27T00:12:52.163 に答える