Flexbox는 SEO를 손상시키지 않고 동적 재정렬을 달성할 수 있습니까?

Flexbox를 사용한 CSS 전용 재정렬

과제:

검색 엔진을 유지하려면- 불필요한 중복 없이 특정 위치에 요소를 표시하면서 친숙하고 의미 있는 DOM 구조.

레이아웃 요구 사항:

• 데스크탑을 중심으로 세로 방향을 지정하는 Flexbox 기반 레이아웃
• 알려지거나 고정된 높이 없음
• 데스크탑의 올바른 열에 대한 태그 팀 동작
• IE11 지원

타당성:

CSS 전용 솔루션:

안타깝게도 CSS 전용 flexbox는 기본적으로 이러한 복잡한 재정렬을 지원하지 않습니다. 그러나 고정 높이를 활용하면 절충이 가능합니다.

<code class="css">.flex {
  height: 90vh;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

JS 기반 솔루션:

또는 녹색 div를 잘라내어 내용을 붙여넣을 수도 있습니다. JavaScript를 사용하여 분홍색으로 만듭니다. 이 접근 방식은 성능 및 깜박임 문제를 초래할 수 있지만 특정 시나리오에 맞게 조정할 수 있습니다.

고정 높이의 예:

다음 코드는 작동하는 CSS 전용을 보여줍니다. 고정 높이를 사용하는 솔루션:

<code class="css">.flex {
  height: 90vh;
}</code>

위 내용은 Flexbox는 SEO를 손상시키지 않고 동적 재정렬을 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!