So implementieren Sie ein Layout mit gleicher Höhe-CSS-Tutorial-php.cn

So implementieren Sie ein Layout mit gleicher Höhe

一个新手

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

Original

1404 Leute haben es durchsucht

Padding-Kompensationsmethode
Stellen Sie zuerst den Padding-Bottom der Spalte auf einen ausreichend großen Wert ein und legen Sie dann den Margin-Bottom der Spalte fest, um den positiven Wert des vorherigen Padding-Werts auszugleichen. Der negative Wert des übergeordneten Containers wird nicht ausgeblendet, sodass die Höhe des untergeordneten und übergeordneten Containers immer noch die Höhe ist, wenn die darin enthaltenen Spalten nicht festgelegt werden. padding-bottom Wenn die Höhe einer Spalte darin zunimmt, Die Höhe des übergeordneten Containers wird auf die Höhe der höchsten Spalte darin gedehnt, und andere Spalten, die kürzer als diese Spalte sind, verwenden ihren Polsterboden, um diesen Höhenunterschied auszugleichen.

<!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>

Nach dem Login kopieren

Zweispaltiges Layout implementieren

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Layout mit gleicher Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!