HTML5+CSS3 Webページ制作：適応型3列レイアウト幅

wulin.comの記事紹介（www.vevb.com）：css3+html5研究ノート4 - CSS 3列レイアウト幅は適応します。

過去には、3列のレイアウトを実行する場合、最も一般的で最も単純な方法は、Float+マージンを使用して実装することです。 CSS3の時代には、CSS3のボックスモデルである別のファッショナブルな方法があります。コードは次のとおりです。

Google Chromeの下での操作効果は次のとおりです。

概要：Box-Flex属性は主にここで使用されます。この属性により、主に子容器は、親コンテナに対する特定のルールに従って幅を分割できます。 3つの子容器がそれぞれ1、2、および3にBox-Flex値を設定した場合、3つの子容器は1：2：3の比率に従って幅を分割します。

もちろん、Display：-WebKit-Boxなどの効果を確認するために、親コンテナをボックスモデルに設定する必要があります。表示：-moz-box;

ただし、上記のコードを直接実行すると、Chromeで問題はありませんが、Firefoxに関しては次のようになります。

、これはFirefoxのバグですか？もともと、左側と右側の幅は固定されていましたが、中央の幅には適応幅がありませんでした。 「HTML5とCSS3の権威あるガイド」の著者と通信した後、親コンテナの幅が設定されていないためにこの状況が発生することに気付きました。幅を追加するだけです：親コンテナに100％。 。 。 「HTM5およびCSS3 Authoritative Guide」の著者に感謝します...