三栏布局,div左右盒子是定宽,中间是自适应
用弹性布局flex:
给父盒子加个display:flex; 给中间盒子设flex=1;
/* 弹性盒子布局*/
.wrap{
width: 100%;
height: 90px;
display: flex;
}
.left{
width: 300px;
height: 90px;
background-color: red;
float: left;
}
.content{
flex:1;
height: 90px;
background-color: yellow;
}
.right{
width: 300px;
height: 90px;
background-color:blue;
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
三栏布局,div左右盒子是定宽,中间是自适应的更多相关文章
- NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应
该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 如何用CSS实现中间自适应,两边定宽三栏布局
1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS三栏布局
一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
- ccs之经典布局(二)(两栏,三栏布局)
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
随机推荐
- [bzoj2843&&bzoj1180]极地旅行社 (lct)
双倍经验双倍的幸福... 所以另一道是300大洋的世界T_T...虽然题目是一样的,不过2843数据范围小了一点... 都是lct基本操作 #include<cstdio> #includ ...
- hdu_1033(我怎么找到的这么水的题,只为保存代码。。。)
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> us ...
- hdu_1358Period(kmp找循环前缀)
题目在这儿 Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- NYoj_104最大和
最大和 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 给定一个由整数组成二维矩阵(r*c),现在需要找出它的一个子矩阵,使得这个子矩阵内的所有元素之和最大,并把这个子矩 ...
- 五 : springMVC拦截器
springMVC拦截器的实现一般有两种方式 第一种方式是要定义的Interceptor类要实现了Spring的HandlerInterceptor 接口 第二种方式是继承实现了HandlerInte ...
- [国嵌攻略][103][Linux内核模块基础]
什么是内核模块 Linux内核的整体结构非常庞大,其中包含的组件也非常多,如何使用这些组件.一种方式是把所有的组件都编译进内核文件,即zImage或bzImage,但这样会导致一个问题,占用内存过多. ...
- [国嵌笔记][017][Makefile工程管理]
Makefile的用途 1.make能够使整个程序的编译.链接只需一个命令就可以完成 2.make的工作主要依赖于Makefile的文件.Makefile文件描述了整个程序的编译.链接等规则,使之自动 ...
- hbase伪分布式安装(单节点安装)
hbase伪分布式安装(单节点安装) http://hbase.apache.org/book.html#quickstart 1. 前提配置好java,环境java变量 上传jdk ...
- Tomcat之URL查找的过程
Tomcat之URL查找的过程 webapps目录: tomcat共享目录.需要共享的本地资源放到此目录中.
- phpstudy php5.4以上版本伪静态设置 thinkphp
http://www.thinkphp.cn/topic/35958.html <IfModule mod_rewrite.c> Options +FollowSymlinks -Mult ...