同じ高さの 2 列レイアウト。パディング + マージンの負の値。同じ高さの複数列。

コード:

レンダリング:

通行人A: 待って？ ?

乗客C: そうでしょう？

乗客B: 冗談ですか？

xiaomogg:

効果は少し悲惨ですが、これは確かに登ることによって処理されています

「登る」が同じ高さではないように見えるのはなぜですか

コード内の赤いボックスに注意してください

padding-bottom:99px;
margin-bottom:-99px;

通行人A: これでは何も説明できません。 ！

乗客B: 本題に入りましょう

乗客C:.......................................

xiaomogg:

実際、「等しい高さ」は実際には同じ高さではありません

1.padding-bottom:99px; margin-bottom:-99px; の値を大きくする必要がある場合、たとえば次のようになります。 ; margin-bottom:- 999px を追加し、同時に 2 つの列の最外層に overflow: hidden を追加すると、「等しい高さ」が表示されます

2。マージンとパディングの値を変更すると、最も外側のレイヤーがオーバーフロー: 非表示になります。効果は上記と同じです

3. 最初のステップのレンダリングを見てください

両側が「上昇」しており、何もありません。右側にありますが、これは単なる「盲目的なトリック」です

① 最も外側のオーバーフローを削除します: hidden;

② または、2 つの列のいずれかの充填コンテンツの高さが 999 より大きい場合、高さが等しくないことが表示されます

③ 「同じ高さの 2 列レイアウト」、「昇順の複数列レイアウト」 「CSS だけを使用してそれを行う場合、それは単なるトリックまたは「隠蔽」です。上記 2 つの場合、状況や未知の状況が発生すると、「高みに登る」ことのデメリットが目の前に露呈します

④ 2カラムのコンテンツの高さを制限できれば、純粋なCSSの2カラムレイアウトを使ってみてください

上記の効果はテストされており、IE7 Google Firefox をサポートしています

著作権表示: この記事はブロガーによるオリジナル記事であり、ブロガーの許可なく転載は許可されません

。