JavaScript 없이 CSS에서 서로 다른 부모의 자녀를 동일한 높이로 정렬하는 방법은 무엇입니까?

CSS: 서로 다른 부모의 자식을 같은 높이로 정렬

CSS로 작업할 때 서로 다른 요소의 자식을 JavaScript를 사용하지 않고 동일한 높이. 이는 컨테이너 내 요소의 레이아웃과 정렬을 제어할 수 있는 Flexbox를 사용하여 수행할 수 있습니다.

이 정렬을 수행하려면 다음 단계를 따르세요.

1. 만들기 컨테이너를 flexbox로 지정: 디스플레이 설정: 자식을 포함하는 컨테이너에 flex를 설정합니다.
2. flexbox로 자식을 감싸기: 디스플레이 설정: 자식을 포함하는 요소를 flex로 지정합니다. , 또는 자식 자체에 적용합니다.
3. flex 방향 설정: 자식이 수직으로 흐르도록 하려면 flex-direction:column을 사용합니다.
4. 높이 균등화: align-self 설정: 각 하위 요소를 늘려서 높이를 동일하게 만듭니다.

제공된 코드 예제에서:

<code class="css">.container {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
}

.content > * {
  align-self: stretch;
}</code>

이 접근 방식은 다음 요구 사항을 충족합니다. Bootstrap의 모바일 최적화를 고려하면서 동일한 높이를 가진 다른 열의 어린이. 필요에 따라 다양한 중단점을 수용하도록 미디어 쿼리를 조정할 수 있습니다.

위 내용은 JavaScript 없이 CSS에서 서로 다른 부모의 자녀를 동일한 높이로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!