コンテナ内の 4 つの DIV の流体幅と均等な間隔を実現するにはどうすればよいですか?

等間隔の DIV を持つ流体幅

質問:

流体幅コンテナがありますDIV には 4 つの DIV があり、それぞれの寸法が固定されています。ブラウザ ウィンドウのサイズが変化しても、流動的な間隔を維持しながら、ボックス 1 を左に、ボックス 4 を右にフロートさせ、ボックス 2 と 3 を均等に配置するにはどうすればよいでしょうか?

**答え:

完全な例については、提供されている JSFiddle を参照してください。 http://jsfiddle.net/thirtydot/EDp8R/

説明:

このソリューションでは、いくつかの手法を利用して目的のレイアウトを実現します:

• text-align: justify;: これは DIV を水平方向に整列させます。
• .stretch: 幅が 100% に設定されたスパン。コンテナの残りの幅を埋めるように展開されます。
• display:inline-block; *表示:インライン; zoom:1;: IE6/7 のインラインブロック動作を保証します。
• font-size: 0; line-height: 0;: IE6 のインラインブロックによって引き起こされる垂直方向のスペースを防ぎます。

これらの技術を組み合わせることで、DIV は、必要に応じて、流動的に、均等に配置され、フローティングで配置されます。コンテナの幅。

以上がコンテナ内の 4 つの DIV の流体幅と均等な間隔を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。