数日前の面接で解けなかった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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
