>웹 프론트엔드 >CSS 튜토리얼 >Div가 상위 컨테이너의 나머지 너비를 차지하도록 하려면 어떻게 해야 합니까?

Div가 상위 컨테이너의 나머지 너비를 차지하도록 하려면 어떻게 해야 합니까?

DDD
DDD원래의
2024-12-10 01:27:10607검색

How Can I Make a Div Occupy the Remaining Width of Its Parent Container?

Div 정렬 마스터하기: Div가 남은 너비를 차지하도록 만들기

당신의 작업은 "div2"라는 이름의 div가 상위 컨테이너 내의 남은 공간을 차지하도록 만드는 것입니다. div, "메인" 이 시나리오에 제공된 HTML 조각은 다음과 같습니다.

<div>

목표를 달성하려면 다음 CSS 코드를 사용하세요.

#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }

설명:

  • Div는 본질적으로 상위 div의 전체 너비를 차지합니다.
  • "div1" 및 "div3"의 너비와 동일한 "div2"에 왼쪽 및 오른쪽 여백을 할당하면 내용이 해당 여백 내에 효과적으로 제한됩니다.
  • HTML의 시퀀스 요소가 중요합니다. 올바른 정렬을 위해서는 "div3" 뒤에 "div2"가 와야 합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.