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

2열 Div 레이아웃: 고정 너비의 오른쪽 열, 왼쪽 유동

질문:

고정 너비 오른쪽을 사용하여 2열 레이아웃을 만드는 솔루션을 찾고 있습니다. 열과 유연한 왼쪽 열. 다양한 제안 접근 방식을 탐색했지만 귀하의 특정 요구 사항을 충족하는 것은 없습니다.

답변:

원하는 레이아웃을 얻으려면 다음과 같은 수정이 필요합니다.

1. 왼쪽 열에서 부동 소수점 제거: 왼쪽 열에서 부동 속성을 제거합니다. 너비는 자동으로 결정됩니다.
2. HTML에서 열 순서 역순: HTML 코드에서 오른쪽 열이 왼쪽 열 앞에 와야 합니다. 이를 통해 유동 왼쪽 열이 조정되기 전에 고정 너비 오른쪽 열이 너비를 설정할 수 있습니다.
3. 외부 Div에 오버플로 및 높이 추가: 오버플로 적용: 숨겨진 속성 및 특정 높이 또는 외부 div의 자동 높이. 이렇게 하면 두 내부 div를 모두 캡슐화할 수 있습니다.
4. 왼쪽 열 CSS 구성: 왼쪽 열에 width: auto 및overflow:hidden을 추가합니다. 이러한 속성은 왼쪽 열을 고정 너비 오른쪽 열과 독립적으로 유지합니다.

HTML 및 CSS 예:

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

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

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

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

이를 구현하여 조정을 통해 고정 너비 오른쪽 열과 유동 왼쪽 열을 사용하여 원하는 2열 레이아웃을 만들 수 있습니다.

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