记一道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 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
随机推荐
- PHP 文件写入或追加数据
PHP file_put_contents() 函数是一次性向文件写入字符串或追加字符串内容的最合适选择. file_put_contents() file_put_contents() 函数用于把字 ...
- SQL如何查询两个表的数据
在进行查询操作时,我们通常需要查询两个关联表的数据,我们可以使用where语句进行查询,如: select Emp.E_Id,Company.C_OraName from Emp,Company wh ...
- Javascript中的对象和原型
一 原型对象 原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别.可以包含特定类型的所有实例的共享属性或者方法.这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处 ...
- mysql安装图解 mysql图文安装教程(详细说明)-[转]
很多朋友刚开始接触mysql数据库服务器,下面是网友整理的一篇mysql的安装教程,步骤明细也有详细的说明. MySQL5.0版本的安装图解教程是给新手学习的,当前mysql5.0.96是最新的稳定版 ...
- (摘)DataGuard物理standby管理 - 主备切换
DataGuard物理standby管理 - 主备切换 Dataguard的切换分为两种,switchover和failover. switchover一般用于数据库或硬件升级,这时只需要较短时间中断 ...
- 这样就算会了PHP么？-3
关于循环,IF,WHILE.... <?php $month = date("n"); $today = date("j"); if ($today &g ...
- Codeforces 4D Mysterious Present
http://codeforces.com/contest/4/problem/D 题目大意: 给出n个信封,这n个信封有长和宽,给出卡片的尺寸,求取能够装入卡片的最长的序列,序列满足后一个的长和宽一 ...
- Unity中的关节
关节组件一共分为5大类,它们分别是链条关节.固定关节.弹簧关节.角色关节和可配置关节.链条关节(Hinge Joint):将两个物体以链条的形式绑在一起,当力量过大超过链条的固定力矩时,两个物体就会产 ...
- 分享注册AltiumDesignerLive官网账号注册方法教程
在Altium中国注册Live账号时,Altium会要求填写一些个人信息来申请账号提交账号后,等很长一段时间都没有得到回复.于是选择另一种方法注册打开Altium在俄罗斯的网址 http://ru.a ...
- 请问FMX手机app多个窗体如何嵌入同一个窗体？
app有多个不同窗体,均调用相同的一个小窗体,因显示同一样的东西,如grid:如果每个窗体都重复加 小窗体的界面和代码,非常麻烦,而且编译后体积也很大: vcl中这样就行: Form1:=TForm ...