Home > Article > Web Front-end > How to implement equal height layout

How to implement equal height layout

一个新手Original: 2017-09-22 10:30:121365browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS floating writing methodNext article：CSS floating writing method

See more

How to implement equal height layout

Related articles