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 ...
随机推荐
- 个人博客作业week2——代码复审
1.代码规范 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 代码规范并不是从官僚制度下产生,它是为了提高项目团队开发效率而产生的一种工具,能够极大的增强代码可读 ...
- 如何将APP部署在阿里云服务器
1,APP应用需要什么样的云服务器? 为了帮助大家了解如何使用阿里云云服务器及相关应用,阿里云的移动云团队开发了一个简单的APP应用:移动云相册,其中使用了ECS主要用作部署云相册的API服务(图片信 ...
- nginx 配置rewrite 笔记
nginx 配置rewrite笔记: 通过下面的示例来说明一下,1. 先说说location : location 表示匹配传入的url地址,其中配置符有多种,各种情况的意义不一样: location ...
- React 随笔二
这周做的demo3和demo4.5 随记的小点. 1.js错误提示: Warning: Each child in an array or iterator should have a unique ...
- java 并发性和多线程 -- 读感 (二 线程间通讯，共享内存的机制)
参考文章:http://ifeve.com/java-concurrency-thread-directory/ 其中的竞态,线程安全,内存模型,线程间的通信,java ThreadLocal类小节部 ...
- activity启动模式区别和优化
初学android的开发人员,可能会经常忽略这个重要的设置. Activity一共有以下四种launchMode:1.standard2.singleTop3.singleTask4.singleIn ...
- 你以为的ASP.NET文件上传大小限制是你以为的吗
我们以为的文件大小限制 我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.confi ...
- Asp.Net Web API 2第十课——使用OWIN自承载Web API
详情请查看http://aehyok.com/Blog/Detail/71.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- 在ASP.NET WebAPI 中使用缓存【Redis】
初步看了下CacheCow与OutputCache,感觉还是CacheOutput比较符合自己的要求,使用也很简单 PM>Install-Package Strathweb.CacheOutpu ...
- 使用JS或jQuery模拟鼠标点击a标签事件
<a id="alink" href="abc.aspx" style="visibility: hidden;">下一步&l ...