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

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

과제는 4개의 동일한 간격의 DIV가 있는 유동 폭 컨테이너를 만드는 것입니다. DIV는 수평으로 정렬되어야 하며 DIV 1은 왼쪽에, DIV 4는 오른쪽에, DIV 2와 3은 그 사이에 위치해야 합니다. 또한 브라우저의 크기가 조정됨에 따라 간격이 동적으로 조정되어야 합니다.

해결 방법

이를 달성하기 위해 CSS 속성 text-align: justify 및 표시를 활용할 수 있습니다. 인라인 블록. 코드는 다음과 같습니다.

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

설명

• #container 요소는 text-align: justify로 설정됩니다. 이렇게 하면 텍스트가 컨테이너 너비에 맞게 확장됩니다.
• 각 .box 요소는 display: inline-block으로 설정됩니다. 이를 통해 인라인 요소처럼 동작하지만 너비와 높이가 고정됩니다.
• .stretch 요소는 .box 요소 사이의 공백 역할을 합니다. width: 100%;로 설정되어 있어 남은 공간을 채울 수 있도록 늘어납니다.
• font-size: 0; line-height: 0은 IE6의 문제를 수정합니다.

브라우저 크기가 조정되면 .stretch 요소가 너비를 조정하여 .box 요소 사이의 간격을 유지하므로 유동적인 레이아웃이 됩니다.

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