CSS レイアウト?? 左は固定幅、右は適応幅、同じ高さlayout_html/css

CSS レイアウト?? 左は固定幅、右は適応幅、同じ高さlayout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:34:23

オリジナル

1035 人が閲覧しました

方法 1:

他に言うことはありません。コードに直接アクセスするか、オンラインデモを参照してください。興味のある学生はすべて HTML と CSS コードを参照してください。

HTML マークアップ

CSS コード

		<div id="container">			<div id="wrapper">				<div id="sidebar">Left Sidebar</div>				<div id="main">Main Content</div>			</div>		</div>

ログイン後にコピー

オンラインデモをご覧ください。

方法 2

HTML マークアップ

CSS コード

rree

オンラインデモを表示します。

方法 3:

HTML マークアップ

CSS コード

		<style type="text/css">			* { margin: 0; padding: 0; }			html { height: auto; }			body { margin: 0; padding: 0; }			#container { background: #ffe3a6; }			#wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-align: bottom; }			#sidebar { float: left; width: 200px; margin-left: -200px;/*==此值等于左边栏的宽度值==*/ position: relative; }			#main { float: left; }				#maing,			#sidebar{ min-height: 200px; height: auto !important; height: 200px; }		</style>

ログイン後にコピー

オンラインデモ効果を表示します。

方法 4:

HTML マークアップ

CSS コード

rree

オンラインデモを表示します。

方法 5:

HTML マークアップ

CSS コード

rree

オンラインデモを表示します。

上記のインタビューの質問の要件に応えて、合計 5 つの異なる方法を使用してテストしましたが、それらはすべてさまざまなブラウザーで実行できます。最後に、いくつかの特別な点を指摘する必要があります。

上記のすべてのデモの中で。方向の協力に注意してください。独自のレイアウトに必要な幅の値を使用したい場合は、上記のすべてのデモのコードに従って変更してください。一定の間隔を空けたい場合は、上記のデモに基づいて関連するパラメータを変更する方法があります。もう 1 つは、「div」タグを追加することです。対応するものを選択し、その「パディング」値を設定すると、ブラウザーの画面が特定のサイズに引き伸ばされるときに、アダプティブ幅を使用する列が含まれるため、レイアウトが崩れることはありません。実際のプロジェクトでは、「body」に「min-width」の設定を追加するのが最適です。