前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。
题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样
当屏幕大于600px时，是这样
我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。
下面是代码：
<!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 front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
