FLEX实现两侧边栏固定中间自适应布局
<style type="text/css">
#outer{
display: flex;
width: 100%;
flex-flow: row nowrap;
}
.left,.right{
width:200px;
height:50px;
background: red;
}
.middle{
flex-grow: 1; //决定如何分配剩余空间
background: yellow;
}
</style>
<body>
<div id="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
FLEX实现两侧边栏固定中间自适应布局的更多相关文章
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- 巧用padding让图片宽高比固定并自适应布局
1.从上图知道原始图片大小是 800 * 250,即宽高比为 3.2: 2.html 及 css 代码如下, 可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之 ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- CSS负边距自适应布局三例
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
随机推荐
- Hibernate 主键策略
Hibernate主键生成策略 .自动增长identity 适用于MySQL.DB2.MS SQL Server,采用数据库生成的主键,用于为long.short.int类型生成唯一标识 使用SQL ...
- JS代码片段：一个日期离现在多久了
var dateDiff = function(hisTime,nowTime){ if(!arguments.length) return ''; var arg = arguments, now ...
- 抽象工厂在ADO.Net中的应用
https://msdn.microsoft.com/zh-cn/library/ms971499.aspx http://www.c-sharpcorner.com/UploadFile/moses ...
- redis状态与性能监控
Redis介绍 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表.哈希.集合和有序集合5种.支持在服务器端计算集合 ...
- asp.net清除页面缓存防止同时登录
//清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...
- Drupal 7.31版本爆严重SQL注入漏洞
今早有国外安全研究人员在Twitter上曝出了Drupal 7.31版本的最新SQL注入漏洞,并给出了利用测试的EXP代码. 在本地搭建Drupal7.31的环境,经过测试,发现该利用代码可成功执行并 ...
- erl0001-Erlang 设计原则 process port io
Erlang原理 (转载自ITEYE cryolite博客 ps:精彩)by Robert Virding This is a description of some of the basic pro ...
- Darwin Streaming server 的 Task 类
Darwin Streaming Server 是一个开放源代码的streaming server,对于streaming server的编程和软件结构有着一定的参考价值,它是使用C++写的,其中的并 ...
- 数学语言和程序语言的对比：面向过程与面向集合&命题
共同之处:都使用字符串或数值来引用一个客观实体.当然数字和字符串也可以作为实体对象,这取决于人的解释. 不同之处:数学语句每一行都给出了一个结论, 程序语句的每一行都定义了一个过程.注意这里所指的程序 ...
- poj 2373 Dividing the Path
Dividing the Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2858 Accepted: 1064 ...