Two-column layout with equal heights. Negative values ​​of padding margin. CSS layout tricks - multiple columns with equal heights_html/css_WEB-ITnose

Code:

Rendering:

Passerby A: OK? Are you waiting? ?

Passerby C: Isn’t it?

Passerby B: Are you kidding me?

xiaomogg:

The effect is a bit miserable, but this is indeed the case

Why does "climbing" seem to be different heights

Please pay attention to the red box in the code

padding-bottom: 99px; question! !

Passenger B: Let’s get into the topic

Passenger C:............ ...

xiaomogg:

Actually, "equal heights" are really not equal heights

1. If the values ​​of padding-bottom:99px; margin-bottom:-99px; should be larger, for example: padding-bottom:999px; margin-bottom:-999px, add them to the outermost layers of the two columns at the same time. overflow: hidden; you can see the "equal height"
2. In fact, if the above example does not increase the negative margin and padding values, even if the outermost layer is given overflow: hidden, the effect will still be As above

3. Look at the rendering of the first step

Both sides are "climbing", and there is nothing on the right side, but this is just "Eye trick"

①Remove the outermost overflow: hidden;

②or you will see if the height of the filled content in any of the two columns is greater than 999 There are no cases of unequal heights

③ "Two columns of equal height" and "Multiple columns of height", if done purely with CSS, are just tricks or "eyesores". If the above two situations occur or are unknown In this case, the disadvantages of "climbing high"

are exposed

④ If you can limit the content height of the two columns, you can try to use pure CSS two-column layout

The above effects have been tested and support IE7 Google Firefox

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.