前几天面试时有道css题没做出来，回来好好学习一番后把其记录下来。

　　题目是这样的：左中右三栏布局，左右两栏宽度固定，左右两栏的宽度为200像素，中间栏宽度自适应。当屏幕小于600px时，3栏会分别占用一行。像这样

　　当屏幕大于600px时，是这样

　　我做出来用了css3的@media，如果不用这个，好吧，水平有限想不出来。。。

下面是代码：

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <style>
  5. body{
  6. 	margin: 0 ;
  7. 	padding: 0;
  8. }
  9. @media screen and (min-width: 600px){
  10. 	.left,.right{
  11. 		position: absolute;
  12. 		top:0;
  13. 		height: 50px;
  14. 		width: 200px;
  15. 	}
  16. 	.left{
  17. 		left:0;
  18. 		background-color: red;
  19. 	}
  20. 	.center{
  21. 		height: 50px;
  22. 		margin: 0 200px;
  23. 		background-color: orange;
  24. 	}
  25. 	.right{
  26. 		right:0;
  27. 		background-color: blue;
  28. 	}
  29. }
  30. @media screen and (max-width: 600px){
  31. 	.left,.right{
  32. 		height: 50px;
  33. 		width: 200px;
  34. 		float:left;
  35. 	}
  36. 	.left{
  37. 		background-color: red;
  38. 	}
  39. 	.center{
  40. 		width: 100%;
  41. 		height: 50px;
  42. 		float: left;
  43. 		background-color: orange;
  44. 			}
  45. 	.right{
  46. 		background-color: blue;
  47. 		}
  48. }
  49.  
  50. </style>
  51. <head>
  52. <body>
  53. 	<div class="left">left</div>
  54. 	<div class="center">center</div>
  55. 	<div class="right">right</div>
  56. </body>
  57. </html>

记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。的更多相关文章

  1. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  2. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  3. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  4. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  5. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  6. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  7. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  9. 详解 CSS 七种三栏布局技巧

    作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...

随机推荐

  1. [Flask Security]当不能通过认证的时候制定跳转

    Flask Security这个插件能对用户权限进行很好的控制. 通过三个model实现: User,存放用户数据 Role,存放角色数据 User_Role.存放用户角色信息 user_datast ...

  2. C语言初学 if-else语句判断俩数的最大值

    #include<stdio.h> main() { float a,b; printf("输入俩个任意实数\n"); scanf("%f%f",& ...

  3. Spark学习笔记--概念知识

    RDD被视为由不同的数据块组成,对于RDD的存取是以数据块为单位的,本质上分区(partition)和数据块(block)是等价的,只是看待的角度不同. 数据块 Spark存储管理模块中所管理的几种主 ...

  4. Robot FrameWork 教程链接

    1.  Robot Framework 教程: http://cgmblog.sinaapp.com/html/category/robot-framework 2.  Robot Framework ...

  5. Okhttp3日志采集功能

    原文地址以示尊重:http://www.jianshu.com/p/d836271b1ae4 日志采集是一个APP必备的功能,可以方便开发人员快速定位问题,解决问题,那么我们在使用okhttp的时候应 ...

  6. 在NGINX作反向代理，CI（CodeIgniter）的PHP框架下限制管理目录的IP的实现

    这个搞得有点久,不过,还算完美解决. 主要是前端NGINX,后端也是NGINX. 前端的NGINX不好作相关的URL权限限制,因为所有的URL在CI里都要经过INDEX.PHP重定向. 并且,在后端N ...

  7. 如何使用git创建项目，创建分支

    git config -global user.name "Your name" git config -global user.email "you@example.c ...

  8. map循环遍历删除

    typedef map<string,int> MapFileList; int main() { MapFileList m_SingleList; m_SingleList.inser ...

  9. Entify Framewrok - Join的使用方法

    问题:有2个表,使用id相连,如何用Join语法将其连接起来? 如下代码 List<tblAssociation> assoList = dataContext.tblAssociatio ...

  10. 分享微博,qq空间,微信

    <div class="share_class" ><div class="bdsharebuttonbox">    <a hr ...