HTML流动布局各种宽度自适应
<!DOCTYPE html>
<html lang="en">
<style>
html,body{
padding: 0;margin: 0;
}
div{
font-size: 12px;
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div style="width: 100%;height: 50px;background: red;">
<div style="float: left;width: auto; background: green;height: 100%;">
区域1自适应:
</div>
<div style="height: 100%;background: brown;overflow: hidden">
<div style="float: right;height: 100%;background: blue;width: 60px;">
区域2固定宽度60
</div>
<div style="height: 100%;background: yellow;width: auto; overflow: hidden">
<div style="float: left;width: 100px;background: gold;height: 100%;">
区域3固定宽度100px
</div>
<div style="background: rebeccapurple;height: 100%;overflow: hidden">
<!--内容垂直水平居中-->
<div style="width: 100%;height: 100%;display: table;text-align: center">
<div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;">
区域4自适应剩下的宽度
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行效果:
HTML流动布局各种宽度自适应的更多相关文章
- FineUI 布局宽度自适应,后台回调js方法
FineUI页面布局,宽度自适应 @(F.Panel().CssClass().ShowBorder().BoxConfigChildMargin("0 5 0 0").ShowH ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- table-cell实现宽度自适应布局
利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- 转:CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- CSS实现两列布局,一列固定宽度,一列宽度自适应方法
不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...
随机推荐
- sqlserver 查看正在执行sql
SELECT [session_id], [request_id], [cpu_time], [start_time] AS '开始时间', [status] AS '状态', [co ...
- ZipFile解压文件不改变压缩包内文件修改日期的方法
本文参考http://stackoverflow.com/questions/9813243/extract-files-from-zip-file-and-retain-mod-date-pytho ...
- mssql分页存储过程
本文转自百度文库http://wenku.baidu.com/view/8f6ec149fe4733687e21aa72.html 必须有主键 原代码 Codeuse users go if exis ...
- Spring框架学习一
Spring框架学习,转自http://blog.csdn.net/lishuangzhe7047/article/details/20740209 Spring框架学习(一) 1.什么是Spring ...
- oracle 模糊查询中的转义字符用法
drop view aaa; create view aaa as select '_BCDE' A FROM DUAL UNION ALL SELECT 'ABCDE' FROM DUAL UNIO ...
- 反射——Java反射机制
反射概述 什么是反射? ① 反射的概念是由Smith在1982年首次提出的,主要指程序可以访问.检测和修改它本身状态或行为的一种能力. ② JAVA反射机制是在运行状态中,对应任意一个类,都能 ...
- 通过XmlHttpRequest实现带进度条异步下载文件
本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善: 本代码仅做技术展现,请勿探讨 ...
- TextClock的基本使用
0.介绍 TextClock是在Android 4.2(API 17)后推出的用来替代DigitalClock的一个控件!TextClock可以以字符串格式显示当前的日期和时间,因此推荐在Androi ...
- java的Map及Map.Entry解析
Map<K,V>是以键-值对存储的(key-value), 而Entry<K,V>是Map中的一个接口,Map.Entry<K,V>接口主要用于获取.比较 key和 ...
- JsonString,字典,模型之间相互转换
NSData转字符串 [NSString alloc] initWithData: encoding:] 模型转字典 attInfo.keyValues 字典转模型 ZTEOutputInfo *ou ...