CSS インタビューの質問を思い出してください。3 列レイアウトの両側は固定幅で、中央の幅は適応型で、レイアウトは画面サイズに応じて変化します。 _html/css

CSS インタビューの質問を思い出してください。3 列レイアウトの両側は固定幅で、中央の幅は適応型で、レイアウトは画面サイズに応じて変化します。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:23

オリジナル

1478 人が閲覧しました

数日前の面接で解けなかったCSSの質問があり、頑張って勉強してメモしました。

テーマはこんな感じです左・中・右の3列のレイアウト、左右の列の幅は固定、左右の列の幅は200ピクセル、中央の列の幅は200ピクセルです列は適応的です。画面が 600px より小さい場合、3 つの列がそれぞれ 1 行を占めます。こんな感じ

画面が600pxより大きい場合はこんな感じです

これを使わないと、まあ、私のレベルでは限界がありますが、できます。考えてみてください。。。

コードは次のとおりです:

<!DOCTYPE><html><head><style>body{	margin: 0 ;	padding: 0;}@media screen and (min-width: 600px){	.left,.right{		position: absolute;		top:0;		height: 50px;		width: 200px;	}	.left{		left:0;		background-color: red;	}	.center{		height: 50px;		margin: 0 200px;		background-color: orange;		}	.right{		right:0;		background-color: blue;			}}@media screen and (max-width: 600px){	.left,.right{		height: 50px;		width: 200px;		float:left;	}	.left{		background-color: red;	}	.center{			width: 100%;		height: 50px;			float: left;		background-color: orange;				}	.right{		background-color: blue;			}}</style><head><body>	<div class="left">left</div>	<div class="center">center</div>	<div class="right">right</div></body></html>

ログイン後にコピー