4

ごめん。質問を編集する必要がありました。Photoshop で 2 番目の画像を作成しました。

**テーブルに相当する DIV を見つけようとしています。div を TD のように動作させる方法: すべての TD はコンテンツが大きくなるにつれて高さを調整し、すべての TDS は Table 要素の下部まで同じ高さになります。** DIV でこれが難しいのはなぜですか? 何年も経った今、標準的な解決策はありませんか?

ここに画像の説明を入力

  1. コンテナ DIV の 2 つの列 div を常に同じ高さ (または常に一番下まで下げる) にするにはどうすればよいですか?
  2. 内部コンテンツが大きくなるにつれて、ラッパーの DIV (赤) もそれに合わせて大きくなり、パディングを維持します (テーブルのように)。
4

4 に答える 4

6

ええ、何らかの理由で、あなたのコンセプトは CSS だけで達成するのは非常に難しいようです。JQuery を受け入れれば、JQuery はそれをよりうまく処理できます。

いずれにせよ、ここに別の選択肢があります。次のように巧妙なトリックを使用します。

#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }

ここでチェックしてください： http://jsfiddle.net/jplew/yPMVJ/

モックアップ

于 2013-08-19T03:45:20.613 に答える
2

これを試して

  <div name="outer">
   <div name="inner>put your contents here</div>
   <div style="clear: both"></div> 
  </div>

外側の div が最後まで拡張することを認識できるように、内側の div の最後に「clear:both」スタイルを持つ div が必要です (clear both simple では、div が行全体を占有し、その周りに何も浮かびません)。 .

于 2013-08-18T00:45:27.837 に答える
1

floatおそらく、子の div に s があるでしょう。その場合、次のいずれかを実行できます。

  1. overflow:auto;親 div のスタイルに追加します。
  2. CSS Clearfixを使用する
  3. clear:both上記の回答のようなスタイルを含む別のタグ (親 div の下の最後のタグ) を追加します。
于 2013-08-18T00:45:47.563 に答える
0

単純なパーセンテージを使用して、JSfiddle でソリューションをモックアップしました: http://jsfiddle.net/xLSQX/

モックアップ

それ以外の場合は、前述のように、overflow:属性とに注意してclear: bothください。

コンテナー内のすべての div がテーブル セルのように機能し、外側の div が要素のように機能するようにします。外側の div の高さは柔軟で、他の div 内のすべてのコンテンツの高さに合わせて調整されます。 ここに画像の説明を入力

于 2013-08-18T00:54:42.817 に答える