CSS布局 -- 左右定宽，中间自适应
左右定宽，中间自适应
有几种方法可以实现
改变窗口大小看看？
方案一：
左右设置绝对定位，定宽，中间设置margin-left margin-right
查看 demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽，中间自适应(1)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 220px;
background: #aaa;
}
.middle{
margin-left: 200px;
margin-right: 220px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="middle">
<h4>middle</h4>
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBB
888888888888888888
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
</body>
</html>
方案二：
采用负边距处理。左中右都float：left;
中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right
左边加上负边距 margin-left:-100% 拉回最左端
右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端
查看 demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽，中间自适应(2)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
float: left;
margin-left: -100%;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
float: left;
margin-left: -220px;
width: 220px;
background: #aaa;
}
.middle{
float: left;
width: 100%;
}
.middle-inner{
margin-left: 200px;
margin-right: 220px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-inner">
<h4>middle</h4>
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</div>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div> <div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBB
888888888888888888
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
</body>
</html>
方案三：
左边使用float:left 右边用float:right，html代码中的中间部分要放后边
查看 demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左右定宽，中间自适应(3)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
float: left;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
float: right;
width: 220px;
background: #aaa;
}
.middle{
margin-left: 200px;
margin-right: 220px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBB
888888888888888888
BBBBBBBBBBBBBBBBBB
88888888888888888888</p>
</div>
<div class="middle">
<h4>middle</h4>
<p>HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHHHH
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</body>
</html>
CSS布局 -- 左右定宽，中间自适应的更多相关文章
- css布局：定宽，自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- CSS布局 -- 左侧定宽，右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- CSS布局——左定宽度右自适应宽度并且等高布局
方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- Layout两列定宽中间自适应三列布局
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...
随机推荐
- 浏览器 CSS Hack 收集
所谓的Hack就是只有特定浏览器才能识别这段hack代码.Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意. 下面是各个浏览器的CSS Hack 列表. Firefox 浏览器 @-m ...
- GOOGLE不能访问的解决方法
1VPN gate 2自 由 门 3修改Windows\System32\drivers\etc hosts (复制https://github.com/txthinking/google-hosts ...
- GridView第一个Item中的CheckBox不工作
问题:如题 解决办法: 修改后: ViewGroup.LayoutParams params =helper.getConvertView().getLayoutParams(); params.wi ...
- OpenSSL命令---pkcs12
用途: pkcs12文件工具,能生成和分析pkcs12文件.PKCS#12文件可以被用于多个项目,例如包含Netscape. MSIE 和 MS Outlook. 用法: openssl pkcs12 ...
- 如何清除朗逸保养提示标志INSP
自己消除insp小扳手方法 具体步骤如下1.插入钥匙,不要转动.2.按住显示屏下方右边的黑圆柱按钮 3.钥匙转到2档,通电自检,期间按住按钮不要松手4.过10秒左右,INSP消失,小扳手自己去除 不用 ...
- LR6 碱性电池才能带动微软鼠标
LR6 碱性电池才能带动微软鼠标 好前一段买个一个微软无线鼠标后来动弹不得,更换电池也不行,本来lp说为什么不扔掉,但因为实在做得很漂亮一直带在身边.改用雷柏的普通无线鼠标后也很是好用.不过要经常 ...
- Emit动态生成代码
Emit动态生成代码 引用:秒懂C#通过Emit动态生成代码 首先需要声明一个程序集名称, // specify a new assembly name var assemblyName = new ...
- android自定义TabView实现圆角列表
看到很多应用的设置界面都有圆角效果的列表,类似下面的 下面说说我的实现原理:继承LinearLayout,然后设置一个自定义的TabAdapter,类似于listview,添加一个setAdapter ...
- javaScript数据类型与typeof操作符
1,typeof操作符. typeof操作符是用来检测变量的数据类型.使用:typeof 变量名;返回以下字符串: 字符串 描述 undefined 未定义 boolean 布尔值 string 字 ...
- LevelDB(v1.3) 源码阅读之 Slice
LevelDB(v1.3) 源码阅读系列使用 LevelDB v1.3 版本的代码,可以通过如下方式下载并切换到 v1.3 版本的代码: $ git clone https://github.com/ ...