前幾天面試時有道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>