ホームページ > ウェブフロントエンド > htmlチュートリアル > div+cssのレイアウトlayout_html/css_WEB-ITnose

div+cssのレイアウトlayout_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:30:48
オリジナル
1076 人が閲覧しました

以下のレイアウト情報の原著者: Owen Briggs http://www.ynutx.net/blog/user1/rainoxu/archives/2006/2439.html

単一行、単一列、単一行、単一列 1: float を使用して左上隅に固定幅でフローティングします。 単一行および単一列 2: 絶対位置を使用して、左上隅に固定され、幅が固定されます。 単一行および単一列 3: 左上隅に固定され、固定幅はありません。パーセンテージ (%) を使用して、ページに適応する幅を定義します。 単一行および単一列 4 (推奨): 固定幅。本文スタイルで定義された中央揃え属性 (text-align: center;) を使用して、ページを自動的に中央揃えにします。 1 行 2 列 1 行 2 列 1: どちらの列も固定幅です。最初の列は左上隅にフロートし、2 番目の列は最初の列の右側にフロートします。 1 行 2 列 2: 両方の列の幅はパーセント値ですが、画面に収まりません。最初の列は左上隅に固定され、2 番目の列は最初の列の右側にフローティングされます。 1 行 2 列 3: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。両方の列は絶対位置に配置されます。 1 行 2 列 4: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。最初の列は左上隅にフロートし、2 番目の列は右上隅にフロートします。 1 行 2 列 5: どちらの列もパーセンテージの幅を持ち、画面いっぱいに表示されます。最初の列は左上隅にフロートし、2 番目の列は最初の列の右側にフロートします。 1 行 3 列 1 行 3 列 1: 左右の列が両方とも絶対位置に配置されます (右列が右上に配置されます)。左右の列は固定幅で、中央の列はページに適応します。 1 行 3 列 2: 左列は左上に位置し、右列は右上に位置し、中央の列は左列の右にフロートします。左右の列は固定幅で、中央の列はページに適応します。 単一行と 3 列 3: 3 列すべてが絶対位置に配置されます。左右の列は固定幅で、中央の列はコンテンツに応じて調整されます。 1 行 3 列 4 (推奨): スタイル 2 と似ていますが、本文スタイルに margin: 20px 属性が追加されている点が異なります。これにより、Netscape 6.0 で中央の列が一番上になる問題が解決されます。 1 行 3 列 5: 左右の列は絶対位置にあり、中央の列は適応的です。全画面幅。 先頭行の 3 列 先頭行の 3 列 1 (推奨): 先頭行はページ幅に適応します。左右の列は絶対位置に配置され、中央の列はページに適応します。 上の行 3 列 2: 全画面幅
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート