垂直方向のスタックを維持しながら DIV 要素を右に揃えるにはどうすればよいですか?

DIV 要素を右に揃える

問題:

HTML ドキュメント内での揃え複数の DIV 要素を右側に配置すると、要素の垂直方向の積み重ねが失われ、水平方向に配置されるという問題が発生する可能性があります。

分析:

「float: right」を使用して、 DIV の位置合わせは、特に DIV が親 DIV 内に含まれている場合に、この問題を引き起こす可能性があります。このような場合、フローティング DIV はドキュメントの通常のフローから削除され、互いに隣接して配置されます。

解決策:

保持しながら右揃えを実現するには垂直スタックの場合、別のアプローチは、次の CSS プロパティを使用することです:

margin-left: auto;

• このプロパティは、DIV の左マージンを自動的に調整します。

margin-right: 0;

• このプロパティは右マージンを削除し、DIV を確保します。

例:

これらのプロパティを使用した、提供されたコードの改良版を次に示します:

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

これらのプロパティを使用すると、ボタンとフォームが右に整列し、意図したとおりに垂直方向に次々と積み重ねられます。

以上が垂直方向のスタックを維持しながら DIV 要素を右に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。