divの内側の親div side width by％width

Question

私は、画面幅の20％、40％の第2列の第1、第3、第4列のパーセンテージでdivsを持つfacebookホームページレプリカを作成しています。 私はブートストラップグリッドシステムのレイアウトを使用していましたが、それは動作していましたが、列の幅を所定の割合で管理するのは難しかったので、単純なdivに敬意を表してパーセンテージを変更しました。

Here

jsfiddleリンクです。

本当にありがとうございます。

Answer 1

フレックスボックスをお試しください。あなたのケースでは、親コンテナに次のルールを適用します。div要素は、サイドバイサイド、それらはすべて同じ高さになるように並べることが保証されます

display: flex; 
align-items: stretch; 

。列1,3、& 4がすべて同じ幅になるようにするには、それぞれにflex: 1を適用します。列2を2倍にするには、他の列の幅にflex: 2を適用します。ここ

更新jsfiddle：https://jsfiddle.net/b0rds1ch/

あなたが（それはレイアウトのために非常に便利です）フレキシボックスについての詳細を知りたい場合はCSS-トリックのgreat write-upがあります。

Answer 2

フロートを左に置く必要があります。あなたの.colでは、それらは並んでいるでしょう。

これが役に立ちます。