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

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

소개:

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

특정 요구 사항:

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

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

해결책:

HTML 구조:

<div>
<p><strong>CSS 스타일링:</strong></p>
<pre class="brush:php;toolbar:false">#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}

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

장점:

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