3 番目の Div を左揃えにしたまま、Div 要素を右揃えにする方法は?

マージンとフロートを使用した Div 要素の整列

問題ステートメント:

ユーザーは 2 つの div 要素を右揃えにしようとしています(ボタンとフォーム) を維持しながら、3 番目の div (キャンバス) を左揃えにします。ただし、最初の 2 つの要素を整列させようとすると、それらは順番にではなく並んで表示されます。

マージンとフロートを使用した解決策:

提供されたコードはフローティングを利用してボタンとフォームを位置合わせします。フローティングは一般に機能しますが、IE 6 および 7 では問題があることが知られています。

これを解決するには、ボタンとフォームを含む内部 div にフローティングではなくマージンを使用することを検討してください。修正された CSS は次のとおりです:

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

説明:

• margin-left: auto: これにより、内側の div がその内容の右端div.
• margin-right: 0: これにより、div が右側のスペースを占有しないようになり、ボタンが残りのスペースを占めることができるようになります。

マージンを使用すると、IE を含むさまざまなブラウザ間で動作の一貫性が高まり、要素が意図したとおりに配置されるようになります。

以上が3 番目の Div を左揃えにしたまま、Div 要素を右揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。