동일 높이 레이아웃을 구현하는 방법
- 一个新手원래의
- 2017-09-22 10:30:121367검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 부동 작성 방법다음 기사：CSS 부동 작성 방법