<!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流动布局各种宽度自适应的更多相关文章

  1. FineUI 布局宽度自适应，后台回调js方法

    FineUI页面布局,宽度自适应 @(F.Panel().CssClass().ShowBorder().BoxConfigChildMargin("0 5 0 0").ShowH ...

  2. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  3. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  4. table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

  5. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  6. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  7. 转：CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  8. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  9. CSS实现两列布局，一列固定宽度，一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

随机推荐

  1. Spark 2.6.1 源代码在 eclipse 的配置

    本文地址:http://www.cnblogs.com/jying/p/3671767.html 这么个问题又耗费了偶一天时间,真是羞愧.. 上午从官网svn地址下载最新的 spark 包,总是下载失 ...

  2. 数字信号处理--Z变换，傅里叶变换，拉普拉斯变换

    傅立叶变换.拉普拉斯变换.Z变换最全攻略 作者:时间:2015-07-19来源:网络       傅立叶变换.拉普拉斯变换.Z变换的联系?他们的本质和区别是什么?为什么要进行这些变换.研究的都是什么? ...

  3. 什么时候该用NoSQL？

    : 杂谈   NoSQL这两年越来越热,尤其是大型互联网公司非常热衷这门技术.根据笔者的经验,并不是任何场景,NoSQL都要优于关系型数据库.下面我们来具体聊聊,什么时候使用NoSQL比较给力: 1) ...

  4. navDemo

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 循序渐进Python3（十一） --4--  web之jQuery

    jQuery         jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的 ...

  6. What is “:-!!” in C code?

    stackoverflow上看到的这个问题,觉得挺有趣,顺手记下来. 楼主提问: I bumped into this strange macro code in /usr/include/linux ...

  7. 【Python全栈笔记】01 [模块二] 14-15 Oct 运算符和字符串 4-1

    编码的问题 中文版 Windows 终端是默认GBK编码格式,python2默认为ASCII编码,虽然我们注释了需要用UTF-8,但是通过命令行运行的文件如果print中文内容还是会出现乱码. Uni ...

  8. C++设计模式——简单工厂模式

    简单工厂模式(Simple Factory Pattern) 介绍:简单工厂模式不能说是一个设计模式,说它是一种编程习惯可能更恰当些.因为它至少不是Gof23种设计模式之一.但它在实际的编程中经常被用 ...

  9. JavaScript内置对象之数组

    一.JavaScript对象之数组 1.创建数组的方式 (1)使用Array构造函数 语法:new Array() 小括号()说明: -预先知道数组要保存的项目数量 -向Array构造函数中传递数组应 ...

  10. Expected one result (or null) to be returned by selectOne(), but found 2

    这个问题在于你查询sql返回结果是多个值.一个集合,但是你在service的实现层的dao都调用了.get方法.而是应该使用.getlist方法等.