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

고정 너비 오른쪽 열을 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!