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" ...
随机推荐
- [Machine Learning] some concept about the CV
Cross-validation VS SSE CV is not designed to improve the fit on the training data, but it won't nec ...
- W7500P硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器(48MHZ)
W7500P 硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器(48MHZ) 硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器(48MHZ) 如果您发现商品信息不准确,欢迎纠错 ...
- qhfl-6 购物车
购物车中心 用户点击价格策略加入购物车,个人中心可以查看自己所有购物车中数据 在购物车中可以删除课程,还可以更新购物车中课程的价格策略 所以接口应该有四种请求方式, get,post,patch,de ...
- 10.18 nslookup:域名查询工具
功能说明 nslookup命令是常用的域名解析查询工具. 如果系统没有nslookup命令,则需要安装下面的软件包: yum-y inatall bind-otil9 语法格式 nslookup ...
- javascript 取整,取余数 math方法
1.丢弃小数部分,保留整数部分 parseInt() 函数可解析一个字符串,并返回一个整数. parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. rad ...
- UART串口通讯协议
一.UART定义 UART 通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART,是一种通用的串行异步全双工数据收发传输器(总 ...
- Oracle数据库查询基本数据
------------------------------------------------------------------找出EMP表select * from EMP;--选择在部门30中 ...
- day12_雷神_线程总结
#线程 1. 多线程理论 0.进程只是一个资源单位,用来隔离资源,从执行角度是主线程. 1.多个线程共享一个进程的数据资源: 2.线程开销小: 2. 开线程的两种方式 0. 站在资源的角度,主进程:执 ...
- Autofac与AOP功能例子
using Autofac.Extras.DynamicProxy; using System; using System.Collections.Generic; using System.Linq ...
- iostat 命令详解
前言 话说搞运维的人没有两把"刷子",都不好意思上服务器操作.还好,我还不是搞运维的,我一直都自诩是开发人员,奈何现在的东家运维人员"水"的一比,还要我这个自诩 ...