CSS를 사용하여 균등한 간격의 DIV로 유동 레이아웃을 만드는 방법은 무엇입니까?

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

균등한 간격의 DIV로 유동적인 레이아웃을 달성하려면 다음 접근 방식을 사용할 수 있습니다. 채용됨:

CSS

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

이것은 텍스트 정렬을 "양쪽 정렬"로 설정하여 콘텐츠가 사용 가능한 너비에 고르게 분포되도록 합니다.

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

display: inline-block을 설정하면 DIV는 인라인 요소처럼 동작하여 컨테이너.

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

남은 공간을 채우고 DIV를 원하는 위치로 밀어넣기 위해 "stretch" 요소가 추가됩니다. 일부 브라우저에서는 글꼴과 줄 높이를 지우는 것이 도움이 됩니다.

HTML

<div>

늘이기 요소는 DIV가 유체 컨테이너 전체에 균일하고 반응적으로 분산되도록 합니다.

위 내용은 CSS를 사용하여 균등한 간격의 DIV로 유동 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!