Home > Article > Web Front-end > 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。_html/css_WEB-ITnose
记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:23:231470browse
前几天面试时有道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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：id，class，name区别_html/css_WEB-ITnoseNext article：刚开始学HTML自己做的，求大神些多多指教。_html/css_WEB-ITnose