더미 요소를 사용하여 CSS로 유동 사각형 레이아웃을 만드는 방법은 무엇입니까?

높이가 너비와 같은 유동 레이아웃 생성

CSS에서는 요소의 높이를 요소의 높이와 동일하게 동적으로 설정할 수 있습니다. 너비로 정사각형 모양의 종횡비를 만듭니다. 이를 달성하기 위해 우리는 "더미 요소" 방법으로 알려진 기발한 기술을 활용합니다.

단계:

1. 디스플레이를 사용하여 컨테이너 div 요소 정의: 인라인 -블록 및 위치: 상대.
2. 여백 상단이 75%인 컨테이너 내에 "더미" 요소를 만듭니다. 이렇게 하면 4:3 가로세로 비율이 설정됩니다.
3. 컨테이너(#element) 내에 절대 요소를 배치합니다. 이 요소는 컨테이너의 높이와 너비를 채웁니다. 컨테이너.

예:

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>

결과:

이 기술은 효과적으로 #element div의 높이가 #container div의 지정된 너비에 따라 동적으로 조정되는 유동 레이아웃입니다. 컨테이너의 크기를 조정해도 요소는 정사각형 비율을 유지합니다.

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