`calc`를 사용하여 CSS로 남은 컨테이너 너비를 채우는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

`calc`를 사용하여 CSS로 남은 컨테이너 너비를 채우는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-27 06:58:02

원래의

719명이 탐색했습니다.

How to Fill Remaining Container Width with CSS Using `calc`?

CSS로 남은 컨테이너 너비 채우기

목표는 컨테이너 div 내에서 'middle'이라는 요소의 너비를 최대화하는 것입니다. 다른 요소를 수용한 후 남은 공간을 차지하도록 합니다.

해결 방법:

이를 달성하려면 CSS 속성 'calc'를 활용하는 것이 핵심입니다. 사용 가능한 너비를 계산하고 다른 요소의 고정 너비를 빼면 남은 너비를 동적으로 결정할 수 있습니다.

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</code>

로그인 후 복사

제공된 예에서:

<code class="html"><div class="left">100 px wide!</div><div class="right">Fills width!</div></code>

로그인 후 복사

및 CSS:

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

로그인 후 복사

빨간색 요소는 너비가 100px로 고정되어 있고, 파란색 요소는 고정된 너비를 고려한 후 남은 공간을 채웁니다.

요소 사이에 공백을 두지 않는 대신에 외부 컨테이너 요소에 글꼴 크기: 0을 설정할 수 있습니다.

위 내용은 `calc`를 사용하여 CSS로 남은 컨테이너 너비를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!