How to implement equal height layout-CSS Tutorial-php.cn

How to implement equal height layout

一个新手

Release： 2017-09-22 10:30:12

Original

1415 people have browsed it

padding compensation method
First set the padding-bottom of the column to a large enough value, and then set the margin-bottom of the column to offset the positive value of the previous padding-bottom. The negative value of the parent container is set beyond hiding, so that the height of the child and parent containers is still the height when the columns in it do not set padding-bottom. When the height of any column in it increases, the height of the parent container is stretched to The height of the tallest column in it, and other columns shorter than this column will use their padding-bottom to compensate for this height difference.

<!DOCTYPE html>
<html>
<head>
    <style>
        *{margin: 0;padding: 0;}
        .container{width: 600px;border: 1px solid black;overflow: hidden}        
        .left{float: left;width: 150px;border: 2px solid red;        
        padding-bottom: 2000px;margin-bottom: -2000px;}
        .right{float: left;width: 400px;border: 3px solid darkblue;        
        padding-bottom: 2000px;margin-bottom: -2000px;}
    </style>
    </head>
    <body>
    <p class="container">
    <p class="left">ger</p>
    <p class="right">gr<br><br><br>rg</p>
    <p style="clear:both"></p></p></body></html>

Copy after login

Implementing two-column layout

<!DOCTYPE html>
<html>
<head>
    <style>
        *{margin: 0;padding: 0;}
        .container{width: 900px;border: 1px solid palevioletred;overflow: hidden;position: relative;}
        .left{margin-right: 120px; border: 1px solid green;height: 300px;}
        .right{float: right;width: 100px;border: 1px solid black;position: absolute;            top:0;right: 0;}
        img{max-width: 100px;max-height: 100px;}
    </style></head><body><p class="container">
    <p class="left"></p>
    <p class="right"><img src="4.jpg"/>
    </p>
    </p>
   </body>
 </html>

Copy after login

The above is the detailed content of How to implement equal height layout. For more information, please follow other related articles on the PHP Chinese website!