アダプティブレイアウトCSS

CSS適応レイアウトは、次のカテゴリに分けることができます。

1、すべて100％の幅、高さ適応ページ

レイアウトのポイントを算出図で分割設計により占有率領域である場合には、事前のHTMLに留意すべきで、本体{高さ：100％;}

 

図2に示すように、二つの列（左および右）の3つの列（フライングウィング）

次のようにこれらの二つのレイアウト方法は、左から右へ順に配置されています。

図1に示すように、トリガールールBFC

二つの列（所定としてBFC：BFCフロート領域と重ならない）隠された：第1の固定幅の左側の列は、右側の幅がオーバーフローを設定し、高度に適応適し

.LEFT {フロート：左;高さ：100％;幅：200pxの;}

.RIGHT {高さ：100％;オーバーフロー：隠されました;}

 

3列：次のように前2列のレイアウトと同じではなく、HTMLの構造変化、コードは次のとおりです。

<DIV CLASS = "ボックス左"> </ div>

<DIV CLASS = "ボックス右"> </ div>

<のdivクラス= "ボックス・センター"> </ div>

次のようにCSSスタイルは以下のとおりです。

■は左{フロート：左;高さ：100％;幅：200pxの;}

■は右{フロート：右;高さ：100％;幅：200pxの;}

■はcentert {高さ：100％;オーバーフロー：隠されました;}