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

2열 Div 레이아웃: 고정 너비 오른쪽 열 및 유동적 왼쪽 열 구현

과제:

만들기 오른쪽 열의 너비는 고정되어 있고 왼쪽 열은 너비가 동적으로 조정되는 2열 레이아웃 사용 가능한 공간.

제공된 코드:

제공된 코드는 부동 및 여백을 사용하여 레이아웃을 구현하려고 시도하지만 문제가 발생합니다.

해결책:

왼쪽의 유동성을 유지하면서 고정 너비의 오른쪽 기둥을 설정하려면 열의 경우 다음 지침을 따르세요.

1. 왼쪽 열에서 부동 소수점 제거: 왼쪽 열에서 부동 속성을 제거합니다(#content).
2. 재주문 HTML 열: HTML 코드의 왼쪽 열 앞에 오른쪽 열(#right)을 배치합니다. 이렇게 하면 올바른 열의 너비가 먼저 적용됩니다.
3. 외부 Div에 Overflow 적용: 외부 div(div. 컨테이너). 이렇게 하면 내부 div가 컨테이너에서 오버플로되는 것을 방지할 수 있습니다.
4. 왼쪽 열 너비 및 오버플로 설정: 왼쪽 열의 너비를 자동으로 설정하고 오버플로: 숨김을 추가합니다. 이렇게 하면 열이 남은 공간을 채우고 오른쪽 열과의 상호 작용을 방지할 수 있습니다.

예 코드:

HTML:

<div class="container">
  <div class="right">
    Right content with fixed width
  </div>
  <div class="left">
    Left content with 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;
}

데모:

[여기]를 방문하세요. JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/)에서 작업 데모를 확인하세요.

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