CSS のみを使用して 2 つの Div の位置を交換するにはどうすればよいですか?

CSS を使用した DIV 位置の交換: ガイド

はじめに

レスポンシブ デザインでは、ここでWeb サイトのレイアウトはさまざまな画面幅に適応するため、最適な表示のために要素の順序を調整することが必要になることがよくあります。この記事では、HTML 構造を変更せずに、CSS を使用して 2 つの div の位置を交換するという課題に取り組みます。

CSS ソリューション

目的の交換を実現するために、次のソリューションが提供されます。ユーザーによる CSS の Flexbox モジュールの利用が含まれます。この手法は、コンテナ要素の機能を利用して、その子のレイアウトと順序を制御します。

実装

1. コンテナ要素を作成します: 交換する div を新しい div 要素でラップします。これは、コンテナー。
2. コンテナーに Flexbox プロパティを適用します。 コンテナーの表示プロパティを flex に設定し、flex-direction を列に設定します。
3. フレックス順序を割り当てます子 div に: order プロパティを使用して、div の意図した順序を指定します。たとえば、順序: 2 を最初の div に設定し、順序: 1 を 2 番目の div に設定すると、それらの位置が逆転します。

CSS の例

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

.container .first_div {
  order: 2;
}

.container .second_div {
  order: 1;
}

このアプローチには、次のような従来の手法に比べていくつかの利点があります。 floats:

• 予測可能な動作: フレックスボックスにより、複雑なレイアウトでも一貫した要素の順序が確保されます。
• マルチブラウザのサポート:モバイルを含むほとんどの最新ブラウザでサポートされています
• 管理が簡単: 要素の順序を変更するには、フレックス順序プロパティを調整するだけで済みます。

考慮事項

• 古い IE サポート: Flexbox は、古いバージョンの Internet Explorer ではサポートされていません。ただし、最新のブラウザを対象としたレスポンシブ デザインの場合、これは通常は問題になりません。
• 動的コンテンツ: div の高さが動的に変化する場合、それに応じてコンテナの高さを調整する必要がある場合があります。オーバーフローの問題を防ぐため。

以上がCSS のみを使用して 2 つの Div の位置を交換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。