《转》div 中间固定 左右自适应实现
《转自》:http://www.w3cplus.com/css/layout-column-three
对于我来说,这是一种很少碰到的布局方法,不知道大家有何体会,那么下面我们一起来看这种布局方法的实现过程,同样先来看html代码:
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法也是借助于负的margin来实现的,首先我们在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,比如说此例中是"540px/2+1"也就是说他们都有一个"margin-left: -271px",这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来,就OK了,大家可以看下在的代码:
#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
} #main {
width: 540px;
float: left;
background: green;
} .inner {
padding: 20px;
} #left .inner,
#right .inner {
margin: 0 0 0 271px;
background: orange;
}
具体效果如下:
这种方法如果在ie下会存在布局混乱的bug,你可以将div#right和div#left中的width值稍作修改:
#left,
#right {
float: left;
margin: 0 0 0 -271px;
width: 50%;
*width: 49.9%;
}
这样一来,在ie下也就安全了。
实现这种效果的方法可能有很多,希望大家有更好的方法能一起分享一起学习。
《转》div 中间固定 左右自适应实现的更多相关文章
- xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...
- 布局:上下两个div高度固定,中间自适应
需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...
- 关于div一侧固定,另一侧自适应
关于div一侧固定,另一侧自适应,从文字看出 一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- css左固定右自适应常用方法
下面是几种方法的公用部分(右自适应也是一样的,换一下方向) html: <div class="demo"> <div class="sidebar&q ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
随机推荐
- css sprites 图片精灵自动生成 插件
grunt-spritesmith https://www.npmjs.com/package/grunt-spritesmith
- 浅谈初次搭建nginx+php+mysql遇到的问题
先说明下我linux上的环境: nginx + php(5.5.10) + mysql 開始的源代码已经在本地写好,并调试成功(本地的环境是用XAMPP的默认配置).在把代码上传至linux上时,出现 ...
- Swift Error fatal error: unexpectedly found nil while unwrapping an Optional value
致命的错误: 对一个为空的optional值进行解包. 强制解包(forced unwrapping): 在optional后面加叹号. 比如 "value!" 错误代码: le ...
- 基于visual Studio2013解决C语言竞赛题之1020订票
题目 解决代码及点评 /* 某航空公司规定:在旅游旺季7─9月份,若订票超过20张,优惠票价的15%,20张以下,优惠5%: 在旅游淡季1─5月.10月.11月份订票超过 ...
- <input type=button> 跳转页面
打开新页面 标题" type="button" onclick='window.open("bedzhao.aspx")' /> 转换本页面 标 ...
- cocos2d-x在win32和iOS、android下获取当前系统时间的方法
最近在游戏里要显示当前系统时间的功能,网上一搜很多写着获取的方法,大都是如下 struct cc_timeval now; CCTime::gettimeofdayCocos2d(&now, ...
- Android KitKat 4.4 Wifi移植之Wifi driver
本文讲述在Linux 3.10下Realek RTL8723A Linux Wifi 驱动的移植. Prerequisites 硬件平台:Atmel SAMA5 软件平台:Linux 3.10 + A ...
- .NET常见面试题
面试题 1 什么是 CTS.CLS 和CLR 公共语言运行库(CLR)是一个CLI 的一个实现,包含了.NET 运行引擎和符合 CLI 的类库. 通用类型系统(CTS)包含在微软公司提交的 CLI ...
- boost计算随机数和计算crc32简单示例 - jwybobo2007的专栏 - 博客频道 - CSDN.NET
boost计算随机数和计算crc32简单示例 - jwybobo2007的专栏 - 博客频道 - CSDN.NET boost::crc_32_type crc32; crc32. ...
- OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)
近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...