记一道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 json_decode 后，数字对象转换成了 科学计数法 的解决方案
php json_decode 后,数字对象转换成了 科学计数法 $obj='{"order_id":213477815351175,"buyer":10000 ...
- 讨论一下PHP相关技能的层次
1.PHP编程能力 由于PHP的入门较为简单,所以暂时只有熟悉和精通两个级别. 1.熟悉PHP:精通PHP语法,掌握常用的函数,熟悉PHP5下的OOP应用,这个是基础,也没什么好说的. 2.精通PHP ...
- vmware安装Linux时无法打开xpdf
vmware10+redhat9 在装第二张镜像文件时,出现如下提示:无法打开xpdf-2.01-8软件包...... 解决方法: vmware中,虚拟机->设置->硬件->CD/D ...
- Python新手学习基础之数据类型——数字类型
创建一组数字 Python 的有以下几种内置数字类型: int,整型,比如:1.-2.598: float,浮点型,比如:0.0.-3.5.18.55: bool,布尔型,即True和False两个关 ...
- 红帽（Red Hat Linux）下SVN服务器的安装与配置
转:http://www.cnblogs.com/xd502djj/archive/2011/01/21/1941404.html 第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subve ...
- cf B. Two Heaps
http://codeforces.com/contest/353/problem/B 题意:要把2*n个两位数分成两部分,使得第一部分上的数和第二部分上的两位数组成四位数.求怎么分能使构成的不同的四 ...
- android实现计算器功能
设计一个简单的计算器. 第一个Activity的界面. 第二个Activity显示算式和计算结果. 第一个Activity代码: import android.app.Activity; import ...
- Android 自定义控件 优雅实现元素间的分割线 （支持3.0以下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42407923 ,本文出自:[张鸿洋的博客] 1.概述 话说,随着Android ...
- python - 消息队列
消息队列分类 1.先进先出 2.后进先出 3.优先级队列 4.双向队列 1.先进先出 import queue q = queue.Queue(2) #队列最大长度 q.put(11) q.put(2 ...
- EF数据建模（一）
大中型软件开发过程中常会使用ORM技术,ORM全称是“对象-关系映射Object-Relation-Mappping”.是将数据库中的数据对象的形式表现出来,并将通过面向对象的方式将这些对象组织起来, ...