CSS垂直三列居中，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */
html,body{
width:100%;
height:100%;
}
body,div{
margin:0;
padding:0;
}
/* 注意这里我给盒子添加了一个右边padding200px ，让中的那个盒子空200px给右边的盒子*/
#box{
position:relative;
padding-right:200px;
height:100%;
}
/* 让盒子左浮动 */
#box .left{
float:left;
width:200px;
height:100%;
background-color:blue;
}
/* overflow让盒子独立出来，触动BFC，这里不设置overflow:hidden;的话他的宽就是100%了，但是我需要让他把左边的盒子的宽度空出来 */
#box .con{
overflow:hidden;
height:100%;
background-color:pink;
}
/* 这里不能设置浮动，只能是定位，因为中间的那个盒子没有浮动，所以中间的那个盒子会占据位置，只能用定位来做。 */
#box .right{
position:absolute;
right:0;
top:0;
width:200px;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="con"></div>
<div class="right"></div>
</div>
</body>
</html>
<!-- 这里虽然如果不给中间那个盒子设置overflow：hidden和给大盒子设置padding-right看起来效果是一样的，但是实际上是不一样的，如果你把左边和右边的背景颜色去掉，你就会发现，中间的那个盒子占满了整个屏幕 -->
CSS垂直三列居中，中间自适应的更多相关文章
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- [html]三列居中自动伸缩的结构
html三列居中自动伸缩的结构 <div style="width:100%;height:80px;border:1px solid #DDD;margin-bottom:10px; ...
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- 纯CSS实现三列布局(两边固定，中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...
- NEC学习 ---- 布局 -三列，右侧自适应
效果如图 html代码: <div class="g-bd3 f-cb"> <div class="g-sd31"> <p> ...
- NEC学习 ---- 布局 -三列，左侧自适应
效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...
- CSS垂直水平完全居中手册
水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...
随机推荐
- 分析Linux内核创建一个新进程的过程
一.原理分析 1.进程的描述 进程控制块PCB——task_struct,为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. struct task_struct ...
- UOJ#34 FFT模板题
写完上一道题才意识到自己没有在博客里丢过FFT的模板-- 这道题就是裸的多项式乘法,可以FFT,可以NTT,也可以用Karasuba(好像有人这么写没有T),也可以各种其他分治乘法乱搞-- 所以我就直 ...
- python 元类
转载自 http://blog.jobbole.com/21351/ 类也是对象 在理解元类之前,你需要先掌握Python中的类.Python中类的概念借鉴于Smalltalk,这显得有些奇特.在大 ...
- vb---输入模式之文本输入与二进制输入区别
使用 VB6 MSCOMM 控件 进行二进制收发 发布时间:2012-01-10 12:12:01 技术类别:嵌入式 MSCOMM 控件是用于串口通信的,使用方便.在VB中,这个串口控件缺省是 ...
- Linux初记
ctrl+u可以在shell下删除行,如果此键不起作用,就试试ctrl+x ctrl+z可以将程序挂起,不会终止程序,但可以将程序挂起. 通过fg命令可再把此作业切换到前台 cp命令的目标文件如果是一 ...
- SQL Server 2008 R2 下移动数据库的存储位置
使用场景:1. 该数据库增长的较大,存储磁盘空间不足: 2. 在特定情况下该数据库需要移动到另外一块磁盘上(呵呵...我的情况就是之前的磁盘要还给别人) 步骤: 1. 新建查询 SELECT na ...
- UIWebView和Js交互
在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能.但是也有一些项目中需要web页面中的html和native进行交互.但是ios sdk 并 ...
- Windows 自动关机/定时关机 命令 shuntdown
一 .倒计时关机: 指定系统在10分钟后自动关闭:点击"开始→运行",输入命令"Shutdown -s -t 60"(注意:引号不输入,参数之间有空格 ...
- JAVA 正则表达式4种常用的功能
下面简单的说下它的4种常用功能: 查询: 以下是代码片段: String str="abc efg ABC"; String regEx="a|f" ...
- Swift-ImageView响应点击事件
随着Swift语言的不断更新迭代,纯Swift语言编写的代码更加紧凑简单,结合StoryBorad的使用,使开发苹果APP的门槛降低了不少.个人也是比较推荐使用Interface Builder去生成 ...