前几天面试时有道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>
时间： 2024-10-11 00:57:46