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 ...
随机推荐
- discuz 使用阿里云OSS
discuz 使用阿里云OSS (转)http://bbs.aliyun.com/read/239257.html 说明:我绑定了二级域名,本演示采用二级域名oss来介绍,我实际使用的是二级域名pic ...
- Scala 深入浅出实战经典 第44讲： scala中view bounds代码实例
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- python排序算法的实现-冒泡
1.算法描述: (1)共循环 n-1 次 (2)每次循环中,如果 前面的数大于后面的数,就交换 (3)设置一个标签,如果上次没有交换,就说明这个是已经好了的. 2.代码 #!/usr/bin/pyth ...
- Linux环境的PHP执行
/usr/local/php5/bin/php -c /var/spool/php.ini -q /var/spool/auto.php
- MassTransit_契约的创建
消息契约的命名规范 命令模式:动词+对象 事件模式:对象+动词 不同模式下要求不同的主键 Creating a message contract In MassTransit, a message c ...
- [转]android开发之字节顺序
原文在此 android上C++程序为小端字节顺序,和windows上一样. 而android上的JAVA程序则使用的是大端字节顺序. 用NDK和java SDK 做android程序时发现的问题,记 ...
- 对已经add的文件不在跟踪
记录每次更新到仓库 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝.接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库. 请记住,工作 ...
- HBase 在HDFS 上的目录树
总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树. 一.0.94-cdh4.2.1版本 系 ...
- 【转载】linux内核启动android文件系统过程分析
主要介绍linux 内核启动过程以及挂载android 根文件系统的过程,以及介绍android 源代码中文件系统部分的浅析. 主要源代码目录介绍Makefile (全局的Makefile)bioni ...
- Maven更新子模块的版本号
mark! 已写成了另一篇,不要打我.