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 ...
随机推荐
- storm trident 示例
Storm Trident的核心数据模型是一批一批被处理的“流”,“流”在集群的分区在集群的节点上,对“流”的操作也是并行的在每个分区上进行. Trident有五种对“流”的操作: 1. 不 ...
- TSP旅行商问题的Hopfield求解过程
连续型Hopfield在matlab中没有直接的工具箱,所以我们们根据Hopfield给出的连续行算法自行编写程序.本文中,以求解旅行商 问题来建立Hopfield网络,并得到解,但是该解不一定是 ...
- 关于Apache日志的统计
统计apache日志文件里访问量前十的ip并按从多到少排列 五月 31, 2012 by FandLR Filed under Linux Leave a comment 解法1: cat acc ...
- asp.net linux 环境部署， jexus
cd /tmpwget linuxdot.net/down/jexus-5.8.1-x64.tar.gztar -zxvf jexus-5.8.1-x64.tar.gzsudo mv jexus /u ...
- NoSQL学习二：MongoDB基本管理命令
MongoDB命令学习 一.MongoDB命令帮助 在安装MongoDB后,启动服务器进程(mongod),可以通过在客户端命令mongo实现对MongoDB的管理和监控: 这是MongoDB最上层 ...
- centos install kafka and zookeeper
1.安装zookeeper ZooKeeper is a distributed, open-source coordination service for distributed applicati ...
- Aspectj 实现Method条件运行
最近我花了半个小时实现了一个Method的按自定义条件运行的plugin,Condition-Run.实现场景是由于我所工作的客户经常会是在同一个代码集上实现多个Brand,所以有些功能只会限制是几个 ...
- FusionCharts简单教程(三)-----FusionCharts的基本属性
通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色.设置提示信息.设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比 ...
- Coding Kata - 挑战你的“底线”
Coding Kata简介 如何进行Kata练习 亲身感受 Coding Kata简介 前段时间听到一个比较有意思的概念叫做Coding Kata,今天试了一下来说说一些想法和思考.Kata是一个日语 ...
- [硬件项目] 1、汽车倒车雷达设计——基于API8108A芯片简易智能语音模块的设计与实现
前言 汽车倒车防碰撞系统是一种辅助汽车泊车装置.低配的由超声波收发电路.回波放大电路.语音提示电路.数码显示.报警及温度补偿电路组成,高配的有时会带有后视视频系统.[1] 一.工作原理 如下 ...