CSSレイアウトまとめ??可変幅layout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

可変幅レイアウト

1-2-1 比例幅

合計幅設定幅: 85%; (IE6 の最小幅サポート、利用可能)

コンテンツセット幅: 66%; フロート: 左

サイドセット幅: 33%;

空の div を追加

HTML 構造:

rrre

1-2-1単一列の幅

サイドの固定幅、ウィンドウの幅に応じてコンテンツが変更されます

サイドの設定幅: 200px; float: left

コンテンツの外側のレイヤーに contentWrap を追加します。contentWrap は幅: 100% に設定されます。 ; margin-right: -220px; float: right;

とコンテンツは margin-right: 220px;

のコンテンツ幅を実現するために使用されます

<!DOCTYPE HTML><html>	<head>    	<title>1-2-1 等比例变宽</title>        <meta charset="utf-8" />            </head>        <body>    	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="content">                <h2>Content Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="side">                <h2>Side Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>    </body></html>

ログイン後にコピー

CSS:

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 650px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

ログイン後にコピー

1-3-1 片側固定列幅

nav 固定幅 width: 20 px; フロート: 左

コンテンツと2 つの div レイヤーを追加します: externalWrap と innerWrap

innerWrap は width: 100%; margin-right: -210px; に設定されます

次に content と side innerWrap と同等です内部的に比例して拡大されます

HTML 構造:

<!DOCTYPE HTML><html>	<head>    	<title>1-2-1 单列变宽</title>        <meta charset="utf-8" />            </head>        <body>    	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="contentWrap">                <div id="content">                    <h2>Content Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                        <div id="side">                <h2>Side Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>    </body></html>

ログイン後にコピー

CSS:

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#contentWrap{				width: 100%;				margin-right: -220px;				float: right;			}			#content{				border: 1px solid black;				background-color: #999;				margin-right: 220px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#clear{				clear: both;			}			#footer{				border: 1px solid black;				background-color: #CCC;			}

ログイン後にコピー

1-3-1 中央の列の幅は固定です

コンテンツの幅は固定されています

nav と side にそれぞれ外側の div を追加します: navWrap と sideWrap
navWrap は width: 50% に設定されます; margin-left: -210px; float: left;

nav は margin-left: 210px に設定されます。 SideWrapとsideも同様の設定をします

HTML構造:

<!DOCTYPE HTML><html>	<head>    	<title>1-3-1 单侧列宽固定</title>        <meta charset="utf-8" />            </head>        <body>    	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="nav">                <h2>Nav Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="outerWrap">            	<div id="innerWrap">                    <div id="content">                        <h2>Content Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                    <div id="side">                        <h2>Side Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>    </body></html>

ログイン後にコピー

CSS:

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 66%;				float: left;			}			#side{				border: 1px solid black;				background-color: #999;				width: 33%;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

ログイン後にコピー

1-3-1 両側の列幅を固定

ナビと横幅が固定されました

ナビwidth: 200px; float: left; の設定

コンテンツとサイドの外側のレイヤーに、単一列の固定幅、ナビの固定幅の設定に相当する、outerWrap と innerWrap を追加します

次に、contentWrap を外側のレイヤーに追加しますinnerWrap 内の単一列の固定幅設定の場合、サイドの固定幅

HTML 構造:

<!DOCTYPE HTML><html>	<head>    	<title>1-3-1 中间列宽固定</title>        <meta charset="utf-8" />            </head>        <body>    	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="navWrap">                <div id="nav">                    <h2>Nav Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                <div id="content">                <h2>Content Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="sideWrap">                <div id="side">                    <h2>Side Header</h2>                    <div class="main">                        <p>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                        </p>                    </div>                </div>            </div>                        <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>    </body></html>

ログイン後にコピー

CSS:

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 700px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#navWrap{				width: 50%;				margin-left: -210px;				float: left;			}			#nav{				border: 1px solid black;				background-color: #999;				margin-left: 210px;			}			#content{				border: 1px solid black;				background-color: #999;				width: 400px;				float: left;				margin-left: 10px;			}			#sideWrap{				width: 49.9%;				margin-right: -210px;				float: right;			}			#side{				border: 1px solid black;				background-color: #999;				margin-right: 210px;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

ログイン後にコピー

1-3-1 中央の列とサイドの列幅は固定

ナビゲーションとコンテンツ固定幅、サイドアウターレイヤーとsideWrap、1-2-1の単一列幅に相当

HTML構造:

<!DOCTYPE HTML><html>	<head>    	<title>1-3-1 双侧列宽固定</title>        <meta charset="utf-8" />            </head>        <body>    	<div id="header">            <p>Header</p>        </div>                    <div id="container">            <div id="nav">                <h2>Nav Header</h2>                <div class="main">                    <p>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                    </p>                </div>            </div>                        <div id="outerWrap">            	<div id="innerWrap">                    <div id="contentWrap">                        <div id="content">                            <h2>Content Header</h2>                            <div class="main">                                <p>                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                                </p>                            </div>                        </div>                    </div>                                        <div id="side">                        <h2>Side Header</h2>                        <div class="main">                            <p>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本                            </p>                        </div>                    </div>                </div>            </div>            <div id="clear"></div>        </div>                    <div id="footer">			<p>footer footer footer footer footer footer footer footer</p>        </div>    </body></html>

ログイン後にコピー

CSS:

			body{				font: 13px/1.5 Arial;				margin: 0;				padding: 0;			}			#header, #container, #footer{				width: 85%;				margin: 10px auto;				min-width: 800px;			}			#header{				border: 1px solid black;				background-color: #666;			}			#nav{				border: 1px solid black;				background-color: #999;				width: 200px;				float: left;			}			#outerWrap{				width: 100%;				margin-right: -210px;				float: right;			}			#innerWrap{				margin-right: 210px;			}			#contentWrap{				width: 100%;				margin-left: -110px;				float: left;			}			#content{				border: 1px solid black;				background-color: #999;				margin-left: 110px;			}			#side{				border: 1px solid black;				background-color: #999;				width: 100px;				float: right;			}			#clear{				clear: both;			}						#footer{				border: 1px solid black;				background-color: #CCC;			}

ログイン後にコピー