非常に優れた基本的な CSS レイアウトの 16 の例_基本チュートリアル

単一行、単一列

単一行および単一列 1: 左上隅に固定幅で浮動表示するには、float を使用します。

#content { float: left; マージン: 20px; 背景: #FFF; ボーダー: 5px; width: 400px; /* ie5win ファッジが始まります */ ""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win ファッジは終了します */ }

単一行および単一列 2

: 左上隅に固定され、幅が固定され、絶対配置を使用します。

#content { 位置: 絶対; 左: 0px; パディング: 10px; 背景: 5px; 幅: 400px; /* ie5win ファッジが始まる-family: "\"}\""; width: 370px; }html>body #content { width: 370px; }

単一行および単一列 3

: 左上隅に固定され、固定幅はありません。ページに適応する幅を定義するにはパーセンテージ (%) を使用します。

単一行および単一列 4

(推奨): 固定幅。本文スタイルで定義された中央揃え属性 (text-align: center;) を使用して、ページを自動的に中央揃えにします。

1 行 2 列

単一行と 2 列 1: どちらの列も固定幅です。最初の列は左上隅にフロートし、2 番目の列は最初の列の右側にフロートします。

1 行 2 列 2

: 両方の列の幅はパーセンテージですが、画面に収まりません。最初の列は左上隅に固定され、2 番目の列は最初の列の右側にフローティングされます。

1 行 2 列 3

: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。両方の列は絶対位置に配置されます。

1 行 2 列 4

: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。最初の列は左上隅にフロートし、2 番目の列は右上隅にフロートします。

1 行 2 列 5

: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。最初の列は左上隅にフロートし、2 番目の列は最初の列の右側にフロートします。

単一行と 3 列

1 行 3 列 1: 左右の列は両方とも絶対に配置されます (右の列は右上に配置されます)。左右の列は固定幅で、中央の列はページに適応します。

1 行 3 列 2

: 左の列は左上に位置し、右の列は右上に位置し、中央の列は左の列の右に浮動します。左右の列は固定幅で、中央の列はページに適応します。

単一行と 3 列 3

: 3 つの列はすべて絶対配置されます。左右の列は固定幅で、中央の列はコンテンツに応じて調整されます。

1 行 3 列 4

(推奨): スタイル 2 と似ていますが、本文スタイルに margin: 20px 属性が追加される点が異なります。これにより、Netscape 6.0 で中央の列が一番上になる問題が解決されます。

Single row and three columns 5

: The left and right columns are absolutely positioned, and the middle column is adaptive. Full screen width.

Three columns in the top row

Three columns in the top row 1(recommended): The top row adapts to the page width. The left and right columns are absolutely positioned, and the middle column is adaptive to the page.

• Top row three columns 2

: full screen width