동일 높이 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

一个新手

Sep 22, 2017 am 10:30 AM

어떻게성취하다공들여 나열한 것

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="/static/imghwm/default1.png"  data-src="4.jpg"  class="lazy"  / alt="동일 높이 레이아웃을 구현하는 방법" >
    </p>
    </p>
   </body>
 </html>

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사