집 >웹 프론트엔드 >CSS 튜토리얼 >동일 높이 레이아웃을 구현하는 방법

동일 높이 레이아웃을 구현하는 방법

一个新手원래의: 2017-09-22 10:30:121385검색

padding 보상 방법
먼저 열의 padding-bottom을 충분히 큰 값으로 설정한 다음 열의 margin-bottom을 이전 padding-bottom의 양수 값을 오프셋하는 음수 값으로 설정합니다. 컨테이너 설정이 Hide를 초과하므로 해당 열에 padding-bottom이 설정되지 않은 경우 하위 컨테이너와 상위 컨테이너의 높이가 여전히 동일합니다. 열의 높이가 증가하면 상위 컨테이너의 높이가 늘어납니다. 이 열보다 짧은 다른 열은 이 높이 차이를 보상하기 위해 바닥 패딩을 사용합니다.

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

2열 레이아웃 구현

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

위 내용은 동일 높이 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 부동 작성 방법다음 기사：CSS 부동 작성 방법