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

고정 너비 오른쪽 열을 사용하여 2열 레이아웃 만들기

웹사이트 레이아웃을 디자인할 때 2열이 필요한 것이 일반적입니다. , 하나는 고정된 너비이고 다른 하나는 유동적인 너비입니다. 이는 CSS 속성과 HTML 구조의 조합을 통해 달성할 수 있습니다.

시작하려면 왼쪽 열에서 float 속성을 제거하는 것이 중요합니다. 위치를 고정하기 위해 부동 소수점과 정의된 너비가 필요한 오른쪽 열과 달리 왼쪽 열은 너비를 유연하게 유지해야 합니다.

또한 HTML 코드에서 오른쪽 열은 왼쪽 열 앞에 배치됩니다.

overflow: 숨겨진 속성과 높이 값(자동 또는 특정 측정값)을 컨테이너 div에 적용하면 주변 공간이 내부 열과 내부 열을 모두 둘러싸게 됩니다. divs.

마지막으로 고정 너비 오른쪽 열로부터 왼쪽 열의 독립성을 보장하려면 width: auto 속성과 Overflow: Hidden 속성을 추가해야 합니다. 이 조합을 사용하면 오른쪽 열을 방해하지 않고 왼쪽 열을 확장할 수 있습니다.

이 레이아웃을 시연하려면 다음 HTML 및 CSS를 고려하세요. code:

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; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

이 레이아웃은 효과적으로 오른쪽에 배치됩니다. 오른쪽 열은 너비가 고정되어 있고 왼쪽 열은 유연한 상태로 유지되어 사용 가능한 너비에 맞춰 조정됩니다. 공간.

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