1. 要素のドリフト
ページ フローから要素を削除し、特定の方向にフローティングします。他のブロック要素がこの要素の下に配置されます。インライン要素が他のブロック要素に挿入されると、インライン要素がこの要素を囲みます。
＃すばらしい{
幅: 200ピクセル;
フロート: 右;
}
図に示すように:
他の要素がこの要素を避けたい場合
コードをコピーする
コードは次のとおりです。
#フッター{
クリア：両方。
}
図に示すように:
2. レイアウトを固定する
要素はページ フロー内に残ります。ウィンドウが拡大または縮小されても、この要素のサイズは変更されません。
コードをコピーする
コードは次のとおりです。
#allcontent{
幅: 800ピクセル;
}
図に示すように:
3. ゲル構造
ページ内のコンテンツ領域の幅をロックし、ブラウザの中央に配置します。
コードをコピーする
コードは次のとおりです。
#allcontent{
幅: 800ピクセル;
マージン左: 自動;
マージン右: 自動;
}
図に示すように:
4. 絶対レイアウト
ページのフローから要素を削除し、ページ上のどこかにフロートさせます。
コードをコピーする
コードは次のとおりです。
#サイドバー{
位置: 絶対;
上: 128ピクセル;
右: 480ピクセル;
}
図に示すように:
5. 固定レイアウト
ページ フローから要素を削除し、ウィンドウ内のどこかにフロートさせます。
コードをコピーする
コードは次のとおりです。
＃クーポン{
位置: 固定;
上: 300ピクセル;
左: 100ピクセル;
}
図に示すように:
6. 相対レイアウト
要素はページ フロー内に残りますが、元の位置はフロー内に残っているため、ページが表示される前に指定された位置にオフセットされます。他の要素によって占有されることはありません。
.beanheading img{
位置: 相対的;
右:120ピクセル;
}
図に示すように: 