JavaScript 없이 CSS에서 다른 부모의 요소를 수직으로 정렬하는 방법은 무엇입니까?

CSS - 서로 다른 부모의 자식을 수직으로 정렬하는 방법

JavaScript를 사용하지 않고 서로 다른 부모의 자식을 수직으로 정렬하려면 해당 자식을 형제로 만들고 다음을 사용하세요. flexbox를 사용하여 순서와 플렉스 기준을 제어할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

업데이트된 코드:

<code class="css">@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {
    order: 0;
  }
  .content p {
    order: 1;
  }
  .content p + p {
    order: 2;
    flex-basis: calc(100% - 30px);
  }
  .content ul {
    order: 3;
  }
}</code>

HTML 코드:

<code class="html"><div class="content">
  <h2>Lorem ipsum Lorem ipsum</h2>
  <p>...</p>
  <p>...</p>
  <ul class="check">...</ul>
  <h2>Lorem ipsum</h2>
  <p>...</p>
  <ul class="check">...</ul>
</div></code>

설명:

• 768px보다 넓은 화면에서 콘텐츠는 순서 속성에 따라 순서가 결정되는 플렉스 항목으로 표시됩니다.
• flex-basis는 각 항목은 사용 가능한 공간을 채울 수 있도록 빈 p 요소에 100% 너비가 설정되어 있습니다.
• 콘텐츠 div 내에서 요소를 형제로 만들어 수직으로 정렬할 수 있습니다.
• 필요한 경우 부트스트랩과 일치하도록 미디어 쿼리의 중단점을 사용자 정의하세요.
• 테두리 속성을 사용하여 요소에 테두리를 추가하고 미디어 쿼리로 조정하여 수직 및 수평 정렬을 모두 지원하도록 할 수도 있습니다.

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