题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样
当屏幕大于600px时，是这样
我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。
下面是代码：
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; }} left
查看更多关于记一道css面试题:三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。_html/css的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111478