【図1】親コンテナに子コンテナを1つ含む構成
[画像のクリックで拡大表示]
【図2】親コンテナに子コンテナを2つ並列させる構成
[画像のクリックで拡大表示]
ウィンドウの幅に合わせてレイアウトの最大幅も変わる設定のこと。divタグで表示をコンテナ化したレイアウトの場合、以下のスタイル例がリキッドレイアウトとなる【図1】。
/* 親コンテナ */
div#container {
width: 90%;
height: auto;
}
/* 子コンテナ */
div#contents {
width: auto;
}
ちなみに、div#container内部にdiv#contentsとdiv#archivesの2つのコンテナを並列したスタイルとするなら以下のようなスタイル構成とする【図2】。
/* 親コンテナ */
div#container {
width: 90%;
height: auto;
}
/* 並列した子コンテナ */
div#contents {
width : auto ;
float : left ;
}
div#contents {
width : 20% ;
float : left ;
}
