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 ...
随机推荐
- HDU5093——Battle ships(最大二分匹配)(2014上海邀请赛重现)
Battle ships Problem DescriptionDear contestant, now you are an excellent navy commander, who is res ...
- Linux Shell脚本入门:tee命令
用途说明 在执行Linux命令时,我们可以把输出重定向到文件中,比如 ls >a.txt,这时我们就不能看到输出了,如果我们既想把输出保存到文件中,又想在屏幕上看到输出内容,就可以使用tee ...
- shell编程基础(3)条件判断语句
1,带参数的shellscript #this is program build 5.11 to test shell script ############ cxz ####### 5.11 ### ...
- java教材
教材blog !!http://www.w3cschool.cc/java/java-tutorial.html ok http://www.douban.com/group/topic/ ...
- PHP开发经验总结
1.使用内嵌的HTML代码,而不是PHP的echo语句. 因为PHP是一门嵌入式Web编程语言,可以将HTML代码和PHP代码相互嵌入.但是很多程序员担心在HTML代码中过多的使用”"嵌入P ...
- AndroidJNI 调用JAVA（转）
转自:http://www.cnblogs.com/likwo/archive/2012/05/21/2512400.html 1. JNIEnv对象 对于本地函数 JNIEXPORT ...
- Mac下安装HBase及详解
Mac下安装HBase及详解 1. 千篇一律的HBase简介 HBase是Hadoop的数据库, 而Hive数据库的管理工具, HBase具有分布式, 可扩展及面向列存储的特点(基于谷歌BigTabl ...
- SQL全文搜索
( select dd.*,t.RANK from crm_CustomerAnalyzeDetails dd ) as t on dd.ID = t.[key] ) union all ( sele ...
- android错误 Android NAND: nand_dev_load_disk_state,
Android NAND: nand_dev_load_disk_state, 总是提示上面这个错误,我以为是内存分配不足呢,但是内存足够用也不行,后来在国外的网站上看到这个问题的解答,说是把用到的A ...
- POJ 2446 Chessboard (二分图匹配)
题意 在一个N*M的矩形里,用1*2的骨牌去覆盖该矩形,每个骨牌只能覆盖相邻的两个格子,问是否能把每个格子都盖住.PS:有K个孔不用覆盖. 思路 容易发现,棋盘上坐标和为奇数的点只会和坐标和为偶数的点 ...