균일한 간격의 DIV를 사용하여 유동 폭 컨테이너를 만드는 방법은 무엇입니까?

균등한 간격의 DIV가 있는 유동 폭

사용자가 동일한 크기(300px)의 하위 DIV 4개를 포함하는 유동 폭 컨테이너 DIV를 생성하려고 합니다. x 250px). 요구 사항은 반응성을 유지하면서 첫 번째 DIV가 왼쪽으로 부동하고, 마지막 DIV가 오른쪽으로 부동하고, 나머지 두 DIV가 그 사이에 균등한 간격으로 배치되어야 한다는 것입니다.

해결책:

다음 CSS 및 HTML을 고려하세요. 구현:

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div>

설명:

• #container DIV는 text-align: justify 및 display: inline-block 속성을 활용하여 정렬합니다. 하위 DIV.
• 인라인 블록은 최신 브라우저에서 지원되지만 브라우저 간 호환성을 고려하여 IE6/7의 경우 Zoom: 1과 함께 display: inline을 사용합니다.
• IE6에서는 인라인 블록 요소의 간격이 적절하지 않으므로 너비가 100%이고 글꼴 크기: 0 및 line-height: 0은 이 문제를 해결합니다.
• "stretch" 클래스가 있는 범위 요소는 DIV를 배포하기 위해 컨테이너의 나머지 공간을 채웁니다.
• 하위 DIV는 원하는 크기로 설정되었으며 데모용으로 특정 배경색이 지정되었습니다.

위 내용은 균일한 간격의 DIV를 사용하여 유동 폭 컨테이너를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!