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 ...
随机推荐
- Usart的单线半双工模式（stm32F10x系列）
这两天折腾CTS/RTS硬件流控,看到说232协议的CTS/RTS只是用来做半双工换向使用的.正好手头上有块stm32的板子,看了看stm32的Usart,竟然发现支持的是单线半双工.232里面毕竟4 ...
- AndroidStudio学习笔记-第一个安卓程序
要带一个本科生做一部分跟安卓有点关系的项目,于是趁着机会学习一下编写安卓程序. 第一篇材料来自谷歌官方,传送门:https://developer.android.com/training/basic ...
- tomcat 8在win8.1中的配置
配置jdk: 三个步骤: 1.环境变量=>新建 JAVA_HOME C:\Program Files\Java\jdk1.8.0_40 2.环境变量=>新建 CLASS_PATH .;%J ...
- [poi2010]Hamsters
题意:Tz养了一群仓鼠,他们都有英文小写的名字,现在Tz想用一个字母序列来表示他们的名字,只要他们的名字是字母序列中的一个子串就算,出现多次可以重复计算.现在Tz想好了要出现多少个名字,请你求出最短的 ...
- The Rotation Game（IDA*算法）
The Rotation Game Time Limit : 30000/15000ms (Java/Other) Memory Limit : 300000/150000K (Java/Othe ...
- Ubuntu NFSserver 简易安装及使用
服务器端(ip:192.168.1.100): sudo apt-get install nfs-kernel-server #安装nfs 客户端(ip:192.168.1.110): sudo ap ...
- Sphinx : 高性能SQL全文检索引擎
Sphinx的特点 快速创建索引:3分钟左右即可创建近100万条记录的索引,并且采用了增量索引的方式,重建索引非常迅速. 闪电般的检索速度:尽管是1千万条的大数据量,查询数据的速度也在毫秒级以上,2- ...
- iOS应用内跳转系统设置相关界面的方法
在iOS开发中,有时会有跳转系统设置界面的需求,例如提示用户打开蓝牙或者WIFI,提醒用户打开推送或者位置权限等.在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个pre ...
- C++混合编程之idlcpp教程Python篇(9)
上一篇在这 C++混合编程之idlcpp教程Python篇(8) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相比,工程PythonTutorial7中除了四个文件PythonTu ...
- [Asp.net 开发系列之SignalR篇]专题二：使用SignalR实现酷炫端对端聊天功能
一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...