记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。
前几天面试时有道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>
记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。的更多相关文章
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS 实现：两栏布局（一边固定，一边自适应）
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- 详解 CSS 七种三栏布局技巧
作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
随机推荐
- 兼容IE的渐变
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=, startColorstr=#1471da, endColorstr ...
- 给大家推荐几款OSX上非常好工具（针对程序员）
前两天,在App Store无意中发现几款免费工具,感觉非常好用,推荐给大家,希望大家喜欢. 一个是帮助文档管理软件,Dash.以前在Windows上开发,经常要自己搜集一些手册,文档,什么html手 ...
- Android 网络通信框架Volley的简单使用
Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮. Volley提供的功能: JSON,图像等的异步下载: 网络请求的排序(scheduling) 网络请求的优先级处理 ...
- document.readystate
http://www.cnblogs.com/lhb25/archive/2009/07/30/1535420.html http://www.cnblogs.com/haogj/archive/20 ...
- cf B. Vasya and Public Transport
http://codeforces.com/contest/355/problem/B #include <cstdio> #include <cstring> #includ ...
- Maven--多模块依赖实例解析（五）
<Maven--搭建开发环境(一)> <Maven--构建企业级仓库(二)> <Maven—几个需要补充的问题(三)> <Maven—生命周期和插件(四)&g ...
- [置顶] Oracle 11g R2 ASM:了解 Oracle ASM 基本概念
About Oracle ASM Instances About Oracle ASM Disk Groups About Mirroring and Failure Groups About Ora ...
- Django之验证码 + session 认证
验证码 + session认证 目录结构 . └── project ├── app01 │ ├── admin.py │ ├── apps.py │ ├── __init__.py │ ...
- HTTP协议具体解释
HTTP是一个属于应用层的面向对象的协议.因为其简捷.高速的方式.适用于分布式超媒体信息系统. 它于1990年提出,经过几年的使用与发展,得到不断地完好和扩展.眼下在WWW中使用的是HTTP/1.0的 ...
- Windows下命令行直接编译程序
D:\> cl hello.cpp Microsoft (R) 32-bit C/C++ Optimizing Compiler Version 12.00.8804 for 80x86 Cop ...