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

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

특정 시나리오에서는 컨테이너 내의 남은 너비를 특정 요소에 할당해야 하는 경우가 있습니다. . 예를 들어 왼쪽의 이미지, 중간 요소, 오른쪽의 요소라는 세 가지 요소가 있는 헤더 표시줄을 생각해 보세요. 목표는 "중간" 요소가 이미지와 올바른 요소 사이의 남은 공간을 채우도록 하는 것입니다.

원하는 레이아웃 달성

원하는 레이아웃을 달성하려면 , CSS에서 calc()의 다양성을 활용하세요. 다음 코드 구현은 이 접근 방식의 예입니다.

HTML:

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

CSS:

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

이 코드에서:

• The .left 및 .right 클래스는 각 요소에 할당됩니다.
• display: inline-block; 다른 콘텐츠 주위로 흐르면서 요소를 가로로 정렬할 수 있습니다.
• width: .left 요소의 명시적인 너비를 100픽셀로 설정하고 .right 요소를 위한 나머지 공간을 남겨둡니다.
• calc (100% - 100px); 100%(컨테이너의 전체 너비)에서 100px(.left의 너비)를 빼서 .right 요소의 너비를 동적으로 계산합니다. 이 값을 사용하면 .right 요소가 남은 공간을 채울 수 있습니다.

이 기술을 활용하면 .right 요소가 자동으로 너비를 조정하여 사용 가능한 공간을 채우고 원하는 레이아웃을 효과적으로 구현합니다.

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