> 웹 프론트엔드 > CSS 튜토리얼 > 동적 높이 조정을 사용하여 안정적인 2열 HTML/CSS 레이아웃을 만드는 방법은 무엇입니까?

동적 높이 조정을 사용하여 안정적인 2열 HTML/CSS 레이아웃을 만드는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-27 15:43:10
원래의
278명이 탐색했습니다.

How to Create a Stable Two-Column HTML/CSS Layout with Dynamic Height Adjustment?

안정적인 2열 HTML/CSS 레이아웃 미세 조정

소개:

HTML/CSS에서 안정적인 2열 레이아웃을 디자인하려면 열을 포함한 여러 요소를 신중하게 고려해야 합니다. 크기, 높이 조정, 변경 및 콘텐츠 변형에 대한 레이아웃 복원력.

특정 요구 사항:

레이아웃은 다음 요구 사항을 충족해야 합니다.

  • 컨테이너 너비와 높이는 자동으로 조정됩니다.
  • 컨테이너 높이는 둘 중 더 큰 높이와 일치합니다. 열.
  • 최소 컨테이너 크기는 왼쪽 열 너비의 두 배입니다.
  • 열은 수직으로 정렬되고 높이가 다양합니다.
  • 테두리가 있어도 열 크기와 레이아웃이 안정적으로 유지됩니다. , 패딩 또는 여백 조정.
  • 왼쪽 열에는 고정된 픽셀 너비가 있습니다.
  • 오른쪽 열 width는 남은 컨테이너 공간을 채워서 100% 너비의 블록 요소가 전체로 확장되도록 합니다.

해결책:

HTML 구조:

<div>
로그인 후 복사

CSS 스타일링:

#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}
로그인 후 복사

이 접근 방식은 CSS 부동 소수점을 활용하여 열을 나란히 배치하고 클리어픽스 해킹(.clear)을 사용하여 부동 열이 컨테이너 높이를 축소하는 것을 방지합니다. 오른쪽 열의 왼쪽 여백은 컨테이너의 남은 공간을 차지하도록 보장합니다.

장점:

  • 안정적인 레이아웃과 열 크기를 유지합니다.
  • 컨테이너 높이는 열을 기준으로 동적으로 조정됩니다. heights.
  • 가변 콘텐츠와 레이아웃 변경을 원활하게 처리합니다.
  • IE8, Firefox 4, Safari 5를 포함한 주요 브라우저와 호환됩니다.

위 내용은 동적 높이 조정을 사용하여 안정적인 2열 HTML/CSS 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿