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 중국어 웹사이트의 기타 관련 기사를 참조하세요!