css布局------左右宽度固定,中间宽度自适应容器
HTML
/*适用方法1，方法2*/
<body>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
/* 适用方法3：*/
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
CSS
/*方法1：定位实现*/
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background-color: red;
}
.middle {
box-sizing: border-box;
width: 100%;
height: 100px;
padding-left: 200px;
padding-right: 200px;
background-color: blue;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background-color: red;
}
/*方法2：弹性布局实现*/
.container {
display: flex;
}
.left {
flex: 0 0 200px;
height: 100px;
background-color: red;
}
.middle {
width: 100%;
height: 100px;
background-color: blue;
}
.right {
flex: 0 0 200px;
height: 100px;
background-color: red;
}
/*方法3：浮动实现*/
.container {
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.middle {
box-sizing: border-box;
width: 100%;
height: 100px;
padding-left: 200px;
padding-right: 200px;
background-color: blue;
}
.right {
float: right;
width: 200px;
height: 100px;
background-color: red;
}
css布局------左右宽度固定,中间宽度自适应容器的更多相关文章
- css布局------上下高度固定,中间高度自适应容器
HTML <body> <div class="container"> <div class="header"></d ...
- css布局之头尾固定中间高度自适应
被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS 实现：两栏布局（一边固定，一边自适应）
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
随机推荐
- SAS DATA步读取数据
上面一节讲了SAS的基本概念,以及语法结构,这次主要讲解SAS DATA步读取数据. 1 ·列表输入 2 ·按列输入 3 ·格式化输入 使用DATA步读取数据的基本形式如下: DA ...
- python 复数类型
1 Python中的算数虚数不能单独存在,它们总是和一个值为0.0的实数部分一起构成一个复数表示虚数的语法:real+imagj实数部分和虚数部分都是浮点数虚数部分必须有j或J下面是些得数:64.23 ...
- pyhon_day1 格式化输出
格式化输出 我们在写Python的在很多时候输出的内容需要规定格式的,这样就引入到了格式化输出 定义: 盗用下大咖的例子: ------------ info of alex ----------- ...
- JDBC几种常见的数据库连接
JDBC的URL＝协议名+子协议名+数据源名.a 协议名总是“jdbc”.b 子协议名由JDBC驱动程序的编写者决定.c 数据源名也可能包含用户与口令等信息:这些信息也可单独提供.几种常见的数据库连接 ...
- iOS 系统通知
iOS相当多一部分系统事件实际上都是通过通知来完成的,依赖于通知的广播形式,我们可以在AppDelegate中通过添加空通知来捕捉所有通知: static NSString *const MYNOTI ...
- cad.net cad启动慢? cad2008启动慢? cad启动延迟? cad卡住? cad98%卡? 默认打印机!!
默认打印机是不是联网打印机,如果cad找不到这个打印机将会很慢才打开cad的界面(它真的不是卡死了,而是找不到...) 奇妙的是桌子至今都没有利用新建线程的方式来控制这个打印机等待,而是直接在主程序上 ...
- Mac OS 中安装 autoconf 和 automake
在Mac上面编译FFmpeg需要安装很多东西,首先是:autoconf 和 automake 请按照以下顺序安装: curl -O http://mirrors.kernel.org/gnu/m4/m ...
- 在虚拟机上安装redis集群，redis使用版本为4.0.5,本机通过命令客户端可以连接访问，外部主机一直访问不了
在虚拟机上安装了redis 4 ,启动后本机客户端可以连接访问,但是外部主机一直访问不了,在使用java代码连接redis集群时报:no reachable node in cluster,原因:在r ...
- Android开发工程师文集-Fragment，适配器，轮播图，ScrollView，Gallery 图片浏览器，Android常用布局样式
Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...
- spring框架学习笔记1：搭建测试
Spring框架介绍: Spring框架涵盖了web.service.dao三层,本身是一个存放对象的容器 形象来说:Spring是项目中对象管家 Spring框架的两大核心思想:控制反转(IOC). ...