css 左右固定宽度，中间自适应的三列布局
float——浮动布局：
使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div>
<div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div>
<div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div>
</body>
</html>
position——定位：
使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left{
width:200px;
height:500px;
position: absolute;
top:0;
left:0;
background:blue;
}
.center{
margin-left: 200px;
margin-right: 300px;
height:500px;
background-color: green;
}
.right{
width:300px;
height:500px;
position: absolute;;
top:0;
right:0;
background: blue;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</body>
</html>
双飞翼布局：
与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.middle{
float: left;
width: 100%;
height: 50px;
background-color: #fff9ca;
}
.middle-wrap{
margin: 0 200px 0 150px;
}
.left{
float: left;
width: 150px;
height: 50px;
background-color: red;
margin-left: -100%; /*负边距的作用就是让左边div盖在中间div上面*/
}
.right{
float: left;
width: 200px;
height: 50px;
background-color: yellow;
margin-left: -200px; /*让右边的div覆盖在中间的div右边*/
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-wrap">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
原文：http://www.cnblogs.com/pwei/archive/2016/04/01/css-layout.html
css 左右固定宽度，中间自适应的三列布局的更多相关文章
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS三列布局之左右宽度固定，中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- html 三列布局（两列自适应，一列固定宽度）
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
随机推荐
- 2018ccpc吉林 E:THE TOWER——数形结合
题目 链接 给你一个圆锥(位于坐标原点,告诉你高h 和底面半径 r),和一个点(x,y,z)并告诉你这个点的速度, 让你求点和圆锥相撞的最小时间(保证一定相撞) 分析 易知,将直线的参数方程与圆锥曲面 ...
- （十八）链接数据库，QSqlTableModel
QMYSQL——mysql QSQLITE——sqlite QOICQ——orcale 所需头文件 .pro增加 sql #include <QSqlDatabase> #include ...
- hdu 2510
Tiling_easy version Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- [JSOI 2016] 最佳团体（树形背包+01分数规划）
4753: [Jsoi2016]最佳团体 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 2003 Solved: 790[Submit][Statu ...
- 2019.10.22 校内CSP%你赛
我太难了 先说好没有代码T1 题目大意: 给定一些形如|ax+b|的式子,求最小的x使得它们的和最小. 算法一: 大家知道零点分段法 对于这n个式子我们有n+1个取值范围 使得展开这n个式子得到的新式 ...
- 7.19T2
小 B 的树 题目背景及题意 小 B 有一颗树,它的形态与 OI 中的树相同,有 n 个节点,n-1 条边,每条边长度为 1 随着时间的流逝这棵树长大了,每条边有 50%的概率长度变为 2 小 B ...
- 什么是nProtect？
nProtect是设计用于保护个人电脑终端不被病毒和黑客程序感染的新概念的基于网络的反黑客和反病毒的工具. 他帮助确保所有输入个人电脑终端的信息在网络上不落入黑客手中. 在最终用户在执行电子贸易时,可 ...
- 引发了未经处理的异常:读取访问权限冲突。 _First 是 nullptr。
1.问题:程序崩溃出现错误 引发了未经处理的异常:读取访问权限冲突. _First 是 nullptr. string strreponse=0: 定义这条语句,字符串初始化错误. 自己开发了一个股票 ...
- C#_选择结构，Console的应用，数据类型转换
1:先看一个顺序结构编程,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.T ...
- 预处理、const、static与sizeof-static全局变量与普通的全局变量有什么区别
1:全局变量的说明之前再加上static就构成了静态的全局变量.全局变量本身就是静态存储方式,静态全局变量当然也是静态存储方式.这两者在存储方式上并无不同.这两者的区别在于,非静态全局变量的作用域是整 ...