CSS 4桁の浮動小数点

Question

私のサイトのフッターdiv内に4桁のdivがあり、正しく動作するように浮動小数点数を正しく取得することができません。

これは構造です。

<div class="footer"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </div>

本部一つは、全幅も、すべてが隣同士に座ってページごとの3分の1を占めてする必要があり、他の3を超えるページの全長を実行する必要があります。

これを処理する最善の方法についてのご意見はありますか？

Answer 1

なぜ何かが単純に好きではない：

#one { 
    width: 100%; 
} 

#two, #three, #four { 
    width: 33.33%; 
    float: left; 
} 

出力はhereを見ることができます。

また、代わりに.footer div:nth-of-type(1)を利用することにより、未知のDIV名でこれを拡張することができます。

.footer div:nth-of-type(1) { 
    width: 100%; 
} 

.footer div { 
    width: 33.33%; 
    float: left; 
} 

私は拡張出力hereを作成しました。

希望すると便利です。

Answer 2

浮動小数点数は#two,#three,#fourで、幅は33.3％ですが、.footerからoverflow: auto;またはその他のクリアフィックス技法でオーバーフローをクリアすることもできます。

.footer { 
    overflow: auto; 
} 
#two,#three,#four { 
    float: left; 
    width: 33.33%; 
} 

あるいは、フレキシボックスでこれを行うことができます

.footer { 
    display: flex; 
    flex-wrap: wrap; 
} 
#one { 
    width: 100%; 
} 
#two,#three,#four { 
    flex-grow: 1; 
    flex-basis: 0; 
}