box-flex 弹性合布局+WebApp布局自适应
问：随着屏幕改变，中间自适应 两边固定宽度？
参考:
问：左侧导航栏隐藏后，右侧内容宽度自动（响应式）变大？
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0 ;padding: 0;
}
div {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
#p1 {
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
background: red;
height: 500px;
}
#p2 {
-moz-box-flex: 8.0;
-webkit-box-flex: 8.0;
box-flex: 8.0;
background: blue;
height: 100px;
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">W3School</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>
参考:
纯属个人观点,仅供参考！
box-flex 弹性合布局+WebApp布局自适应的更多相关文章
- flex 弹性合模型
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- flex弹性布局学习
一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- flex弹性布局学习总结
本文首次发布在我的个人博客:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载 ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
随机推荐
- python 机器学习中模型评估和调参
在做数据处理时,需要用到不同的手法,如特征标准化,主成分分析,等等会重复用到某些参数,sklearn中提供了管道,可以一次性的解决该问题 先展示先通常的做法 import pandas as pd f ...
- pyenv离线安装python各版本
1.问题描述: 可能是国内的网络原因,在线用pyenv安装python老是定住没反应 [root@zabbix ~]# pyenv install Downloading Python-.tar.xz ...
- STL vector简单用法
初涉c++,此为<算法笔记>中的内容,有待个人理解完善. vector vector翻译为向量,叫做"变长数组"更容易理解. 头文件:#include<vecto ...
- logstash过滤器插件filter详解及实例
1.logstash过滤器插件filter 1.1.grok正则捕获 grok是一个十分强大的logstash filter插件,他可以通过正则解析任意文本,将非结构化日志数据弄成结构化和方便查询的结 ...
- 设置UITextView光标从起始位置开始
一.刚开始用的时候,我加载的UITextView一直是这种情况: 当我在ViewController中设置这个属性: self.automaticallyAdjustsScrollViewInsets ...
- Windows和Mac浏览器启动本地程序
前言 这几天有个需求,需要在IE上启动本地程序,就如下面一样. 一开始,我还以为IE有提供特殊的接口,类似上图中的“RunExe”,可以找了大半天觉得不对经(找不到该方法). 后来想想不对,这种方式是 ...
- Mysql连接错误：Mysql Host is blocked because of many connection errors
环境:linux,mysql5.5.31错误:Host is blocked because of many connection errors; unblock with 'mysqladmin f ...
- UVA548-Tree(二叉树数组表示)
Problem UVA548-Tree Accept: 2287 Submit: 13947 Time Limit: 3000 mSec Problem Description You are to ...
- Kafka远程调试简单记录
Kafka启动脚本: ./kafka-server-start.sh -daemon ../config/server.properties 最终翻阅脚本可以确定是调用kafka-run-class. ...
- http://blog.csdn.net/pipisorry/article/details/51471222
这个博主很有意思 机器学习之用Python从零实现贝叶斯分类器 参数估计:贝叶斯思想和贝叶斯参数估计