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 ...
随机推荐
- HDU5088——Revenge of Nim II(高斯消元&矩阵的秩)(BestCoder Round #16)
Revenge of Nim II Problem DescriptionNim is a mathematical game of strategy in which two players tak ...
- sql中exists,not exists的用法
exists : 强调的是是否返回结果集,不要求知道返回什么, 比如: select name from student where sex = 'm' and mark exists(select ...
- Android 自定义控件-TextView
很多时候系统自带的View满足不了设计的要求,就需要自定义View控件.自定义View首先要实现一个继承自View的类.添加类的构造方法,override父类的方法,如onDraw,(onMeasur ...
- tomcat 内存配置
在bin目录下的catalina.bat里添加如下代码: rem ----- Execute The Requested Command ------------------------------- ...
- HTML常用标签及其全称
<a href="#">a 超级链接(anchor)</a> <abbr title="abbreviation的简写"& ...
- myeclipse2014破解版本链接
myeclipse2014破解版本下载链接 http://www.my-eclipse.cn/#download myeclipse2014破解版本汉化链接 https://blog.my-eclip ...
- textbox不支持Ctrl+A
http://stackoverflow.com/questions/5885739/why-are-some-textboxes-not-accepting-control-a-shortcut-t ...
- 自动化：Appium运行成功，取得一个小的胜利
看过乙醇大神的博文,然后又看了一些大神的博文,自己陆陆续续的折腾了一个月,今天上午的时候,appium终于跑起来了.纪念下,在自动化路上取得的一个小胜利 Appium版本:1.2 Python版本:2 ...
- 最大流 Dinic + Sap 模板
不说别的,直接上模板. Dinic+当前弧优化: struct Edge{ int x,y,c,ne; }e[M*]; int be[N],all; int d[N],q[N]; int stack[ ...
- UVa 11526 H(n)
题意: long long H(int n){ long long res = 0; for( int i = 1; i <= n; i=i+1 ){ res = (res + n/i); } ...