고정 너비를 사용하여 두 Div 사이에 공간을 비례적으로 나누려면 어떻게 해야 합니까?

두 개의 Div, 비례적으로 공간 나누기

웹 페이지에서 두 개의 div 컨테이너가 있는 시나리오를 접할 수 있습니다. 하나는 너비가 고정되고 다른 하나는 너비가 고정되어 있습니다. 남은 사용 가능한 공간을 차지해야 합니다. 반응형 레이아웃 디자인을 위해서는 이 설정을 효과적으로 구성하는 것이 필수적입니다.

이를 달성하기 위해 다양한 CSS 기술을 활용할 수 있습니다. 다음은 일반적으로 사용되는 두 가지 방법입니다.

방법 1: 너비 속성 설정

고정 너비 div의 특정 너비를 설정하고 calc() 함수를 사용하여 계산합니다. 그에 따라 다른 div의 너비. calc() 함수의 값이 고정 너비 div의 너비, 여백이나 안쪽 여백, 남은 공간의 원하는 비율을 고려하는지 확인하세요.

방법 2: Display:table 활용 및 Display:table-cell

display: table 및 display: table-cell 속성을 활용하여 표와 같은 레이아웃을 만듭니다. 고정 너비 div의 너비 속성을 설정하고 백분율 값을 지정하여 다른 div의 너비를 조정합니다. 백분율 값에 따라 차지해야 하는 남은 공간의 비율이 결정됩니다.

예제 코드:

아래 HTML 및 CSS 코드 샘플을 참조하세요. (오른쪽 클래스 포함) 너비는 250px로 고정되어 있고 왼쪽 div(클래스 왼쪽 포함)가 남은 공간을 차지합니다.

HTML:

<code class="html"><div class="left"></div>
<div class="right"></div></code>

CSS:

<code class="css">.left {
  overflow: hidden;
  min-height: 50px;
  border: 2px dashed #f0f;
}

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

이러한 기술을 활용하면 두 개의 div 컨테이너 사이의 공간을 효과적으로 분할하여 유연하고 반응성이 뛰어난 웹 레이아웃을 만들 수 있습니다.

위 내용은 고정 너비를 사용하여 두 Div 사이에 공간을 비례적으로 나누려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!