三栏布局，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 ...
随机推荐
- 最短路 spfa 算法 && 链式前向星存图
推荐博客 https://i.cnblogs.com/EditPosts.aspx?opt=1 http://blog.csdn.net/mcdonnell_douglas/article/deta ...
- Big Event in HDU（多重背包套用模板）
http://acm.hdu.edu.cn/showproblem.php?pid=1171 Big Event in HDU Time Limit: 10000/5000 MS (Java/Othe ...
- linux系统下Vi编辑器或者Vim编辑器设置显示行号、自动缩进、调整tab键宽度的技巧？
工作中嫌vim 中一个tab键的宽度太大,linux系统默认,没改之前是一个tab键宽度是8个字符,想改成4个字符, 操作如下:(注意:这是在root用户下)cd ~vim .vimrc添加如下几行: ...
- linux（CENTOS）系统各个目录的作用详解
Linux(CentOS)系统各个目录的作用详解 文件的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.S ...
- 如何开发由Create-React-App 引导的应用（一）
此文章是翻译How to develop apps bootstrapped with Create React App 官方文档 系列文章 如何开发由Create-React-App 引导的应用 如 ...
- webpack打包非模块化js
本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default f ...
- lnmp14最新版
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin Server/Aliyun/Amazon/Mint Linux发行版 需要5GB以上硬盘剩 ...
- 调用QQ聊天功能
[HTML]: <a href="javascript:void(0);" onclick="chatQQ()">咨询客服</a> fu ...
- java访问修饰符 public protect default private
适用范围<访问权限范围越小,安全性越高> 访问权限 类 包 子类 其他包 public ok ok ok ok (对所有可用的 ...
- Mysql执行计划说明
Mysql执行计划翻译: 官网原文请见http://dev.mysql.com/doc/refman/5.6/en/explain-output.html:5.6 EXPLAIN语句提供有关SELEC ...