> 웹 프론트엔드 > CSS 튜토리얼 > 고정 너비 오른쪽 열이 있는 2열 레이아웃을 만드는 방법은 무엇입니까?

고정 너비 오른쪽 열이 있는 2열 레이아웃을 만드는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-12-07 15:25:11
원래의
697명이 탐색했습니다.

How to Create a Two-Column Layout with a Fixed-Width Right Column?

고정 너비 오른쪽 열을 사용하여 2열 레이아웃을 만드는 방법

웹 디자인에서는 레이아웃을 만들어야 하는 경우가 많습니다. 두 개의 열이 있는데 그 중 하나는 고정된 너비이고 다른 하나는 유동적입니다. 일반적인 요구 사항에도 불구하고 일관되게 작동하는 솔루션을 찾는 것이 어려울 수 있습니다.

이 특정 사례의 목표는 오른쪽 열이 일정한 너비를 유지하고 왼쪽 열이 확장 또는 축소되는 두 개의 열을 만드는 것입니다. 사용 가능한 공간에. 단계별 답변은 다음과 같습니다.

  1. 왼쪽 열에서 부동 제거: 왼쪽 열에서 부동 속성을 제거하면 자연스럽게 흐를 수 있습니다.
  2. 왼쪽 열 앞으로 오른쪽 열 이동: HTML에서는 오른쪽 열이 왼쪽 열 앞에 와야 합니다. one.
  3. 오른쪽 열에 너비 및 부동 설정: 오른쪽 열의 고정 너비를 정의하고 부동 소수점을 적용합니다(예: float: right).
  4. 외부 Div에 오버플로 및 높이 추가: 내부 div가 모두 포함된 외부 div에 오버플로: 숨김 및 높이(자동일 수 있음)를 적용합니다. 열.
  5. 왼쪽 열에 자동 너비 및 오버플로 추가: 왼쪽 열의 너비를 자동으로 설정하고 오버플로 적용: 숨김. 이렇게 하면 올바른 열과의 독립성이 보장됩니다.

예제 HTML:

<div class="container">
  <div class="right">
    Right Content (Fixed Width)
  </div>
  <div class="left">
    Left Content (Flexible Width)
  </div>
</div>
로그인 후 복사

CSS:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}
로그인 후 복사

이 솔루션은 왼쪽 열을 허용하면서 고정 너비 오른쪽 열을 사용하여 원하는 2열 레이아웃을 만듭니다. 브라우저 창 크기에 따라 동적으로 조정되는 열입니다.

위 내용은 고정 너비 오른쪽 열이 있는 2열 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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