マージンを使用して Div が他の Div 間の残りのスペースを埋めるにはどうすればよいですか?

マージンを使用して残りのスペースを埋める

HTML では、div1 と div3 の幅を設定しましたが、div2 は設定していません。これにより、左右の列の間に未知の量のスペースが残りますが、そこに div2 が配置されるはずです。

div2 を残りの幅に埋めるには、マージンを使用できます。方法は次のとおりです:

#Main {
  width: 500px;
}

#div1 {
  width: 100px;
  float: left;
}

#div2 {
  margin-left: 100px;
  margin-right: 100px;
}

#div3 {
  width: 100px;
  float: right;
}

この CSS では:

• div2 の幅は明示的に設定されていません。代わりに、左右のマージンがそれぞれ 100 ピクセルに設定されます。これにより、div2 が div1 と div3 の間のスペースを占めるようになります。
• HTML では div2 が div3 の後に配置されることに注意してください。これにより、div2 がコンテナの最後に押し込まれるのではなく、div1 と div3 のマージンの間に配置されるようになります。

これらの CSS 変更により、div2 は #Main 内の残りの幅を自動的に埋めます。コンテナーを配置し、3 つの列の間に空の隙間がないようにします。

以上がマージンを使用して Div が他の Div 間の残りのスペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。