> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 컨테이너 요소의 남은 너비를 채우는 방법은 무엇입니까?

CSS에서 컨테이너 요소의 남은 너비를 채우는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-10-26 02:58:02
원래의
305명이 탐색했습니다.

How to Fill the Remaining Width of a Container Element in CSS?

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

웹 디자인 영역에서는 컨테이너 요소 내 남은 공간을 채우는 것이 필수적인 경우가 많습니다. . 이는 화면의 일부를 차지하는 헤더나 탐색 모음을 만드는 데 특히 유용할 수 있습니다. CSS를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

다음 코드 조각을 고려하세요.

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>
로그인 후 복사
<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}</code>
로그인 후 복사

보시다시피 ID가 "middle"인 div가 채워질 것으로 예상됩니다. 헤더 표시줄의 남은 공간. CSS를 사용하여 이를 실현해 보겠습니다.

<code class="css">#middle {
  flex: 1; /* New code */
}</code>
로그인 후 복사

flex: 1을 추가하면 브라우저가 이 요소에 대해 유연한 크기 조정 방식을 사용하도록 지시할 수 있습니다. 이 방식에서는 제약 조건을 준수하면서 최대한 많은 공간을 차지합니다.

추가 참고 사항:

  • calc() 함수는 CSS 값에 대한 수학 연산을 수행하는 데 사용할 수 있습니다. 이 경우 calc(100% - 100px)는 왼쪽 div가 100px를 차지한 후 컨테이너의 나머지 너비를 계산합니다.
  • 또는 외부 요소에 글꼴 크기: 0을 설정하여 너비를 제거할 수 있습니다. 인라인 요소 사이에 공백이 있습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿