다른 내부 div의 너비가 동적으로 설정된 후 내부 div가 나머지 가로 공간을 채우는 방법은 무엇입니까?

내부 Div의 너비 설정

중첩된 div 및 유연한 콘텐츠로 작업할 때 각 div에 적절한 너비를 결정하는 것이 어려울 수 있습니다. 이 질문은 다른 내부 div의 너비를 고려한 후 내부 div의 너비를 나머지 가로 공간으로 설정하는 기술을 탐구합니다.

HTML 구조:

HTML 구조는 외부 div와 두 개의 중첩된 내부 div로 구성됩니다.

<div>

문제 설명:

목표는 #inner2 div가 나머지 가로 공간을 채우는 것입니다. #inner1 div의 너비 이후의 공백은 내용에 따라 동적으로 결정됩니다.

미스터리 요소: 오버플로: 숨김

이 레이아웃을 구현하는 핵심은 다음을 사용하는 것입니다. CSS 속성 오버플로: 숨김; 외부 div(#outer)에 있습니다. 이는 부동 하위 항목을 자체 경계 내로 제한하도록 브라우저에 지시합니다.

수정된 HTML:

CSS를 효과적으로 적용하려면 div ID가 유효한 CSS 구문을 따라야 합니다.

<div>

CSS 솔루션:

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

브라우저 호환성 및 예외 사례:

이 솔루션은 테스트를 거쳤습니다. IE 6, 7, 8에서 올바르게 작동하는 것으로 확인되었습니다. 파이어폭스 3.5; 및 Chrome 4. IE 6에서는 Zoom을 사용하는 추가 CSS 규칙: 1; #inner2 div가 남은 공간을 채우도록 해야 합니다.

위 내용은 다른 내부 div의 너비가 동적으로 설정된 후 내부 div가 나머지 가로 공간을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!