フローに影響を与えずに Div 要素を右揃えにする方法は?

Div 要素を右揃え

複数の div 要素があり、それらをコンテナ内で整列させたい場合は、次のようにすることができます。要素の流れに影響を与えることなく、目的のレイアウトを実現するのは困難です。この記事では、div 要素を整列する方法、特に右揃えに焦点を当てて説明します。

次のシナリオを考えてみましょう。body 要素内に 3 つの div 要素 (ボタン、フォーム、キャンバス) があるとします。要件は、キャンバスの左揃えを維持しながら、ボタンとフォーム要素を右揃えにすることです。ただし、現在の CSS コードでは、最初の 2 つの要素が右側に連続するのではなく、水平方向に隣り合って配置されます。

質問で提供されている CSS は、ボタンとフォームを右揃えにしようとしています。 float プロパティを使用した div。このアプローチは通常は効果的ですが、Internet Explorer バージョン 6 および 7 では二重マージンのバグにより問題が発生する可能性があります。

この問題に対処するには、次の代替アプローチをお勧めします。

<code class="css">#addEventForm {
  margin-left: auto;
  margin-right: 0;
}</code>

この CSS ルールは、Internet Explorer の要素の流れを壊すことなく、フォーム div をボタン div の右側に自動的に配置します。左マージンを auto に、右マージンを 0 に設定し、ボタン div の直後の位置を維持しながら、フォーム div がコンテナの右端に確実にプッシュされるようにします。

以上がフローに影響を与えずに Div 要素を右揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。