CSS `calc()`를 사용하여 요소가 컨테이너의 나머지 너비를 채우도록 하려면 어떻게 해야 합니까?

CSS에서 컨테이너 너비를 효율적으로 채우기

HTML 마크업에는 이미지, 중간 요소, 오른쪽 요소라는 세 가지 요소가 포함된 헤더 표시줄이 있습니다. 중간 요소는 컨테이너의 나머지 너비를 차지하도록 되어 있습니다.

이를 달성하기 위해 CSS는 강력한 도구인 calc()를 제공합니다. 이 기능을 사용하면 사용 가능한 공간을 기반으로 길이를 동적으로 계산할 수 있습니다.

다음 CSS 규칙에 마법이 있습니다.

<code class="css">#middle {
  width: calc(100% - 100px);
}</code>

이 규칙에서 #middle 요소의 너비는 다음을 빼서 계산됩니다. 전체 컨테이너 너비(100%)에서 고정 너비 #left 요소의 너비(100px)입니다. 이렇게 하면 가운데 요소가 남은 공간을 완벽하게 채울 수 있습니다.

요약하자면, calc()를 활용하면 사용 가능한 컨테이너 공간에 따라 #middle의 너비를 동적으로 조정할 수 있어 미적으로 보기 좋고 완벽하게 정렬된 헤더 표시줄.

위 내용은 CSS `calc()`를 사용하여 요소가 컨테이너의 나머지 너비를 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!