《转自》: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 中间固定 左右自适应实现的更多相关文章

  1. xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  2. 布局:上下两个div高度固定,中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  3. 关于div一侧固定,另一侧自适应

    关于div一侧固定,另一侧自适应,从文字看出 一侧固定:说明有固定长度, 一侧自适应:说明是按比例缩放 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  6. css左固定右自适应常用方法

    下面是几种方法的公用部分(右自适应也是一样的,换一下方向) html: <div class="demo"> <div class="sidebar&q ...

  7. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  9. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

随机推荐

  1. css sprites 图片精灵自动生成 插件

    grunt-spritesmith https://www.npmjs.com/package/grunt-spritesmith

  2. 浅谈初次搭建nginx+php+mysql遇到的问题

    先说明下我linux上的环境: nginx + php(5.5.10) + mysql 開始的源代码已经在本地写好,并调试成功(本地的环境是用XAMPP的默认配置).在把代码上传至linux上时,出现 ...

  3. Swift Error fatal error: unexpectedly found nil while unwrapping an Optional value

    致命的错误: 对一个为空的optional值进行解包. 强制解包(forced unwrapping): 在optional后面加叹号. 比如  "value!" 错误代码: le ...

  4. 基于visual Studio2013解决C语言竞赛题之1020订票

         题目 解决代码及点评 /* 某航空公司规定:在旅游旺季7─9月份,若订票超过20张,优惠票价的15%,20张以下,优惠5%: 在旅游淡季1─5月.10月.11月份订票超过 ...

  5. <input type=button> 跳转页面

    打开新页面 标题" type="button" onclick='window.open("bedzhao.aspx")' /> 转换本页面 标 ...

  6. cocos2d-x在win32和iOS、android下获取当前系统时间的方法

    最近在游戏里要显示当前系统时间的功能,网上一搜很多写着获取的方法,大都是如下 struct cc_timeval now; CCTime::gettimeofdayCocos2d(&now, ...

  7. Android KitKat 4.4 Wifi移植之Wifi driver

    本文讲述在Linux 3.10下Realek RTL8723A Linux Wifi 驱动的移植. Prerequisites 硬件平台:Atmel SAMA5 软件平台:Linux 3.10 + A ...

  8. .NET常见面试题

    面试题 1  什么是 CTS.CLS 和CLR 公共语言运行库(CLR)是一个CLI 的一个实现,包含了.NET 运行引擎和符合 CLI 的类库. 通用类型系统(CTS)包含在微软公司提交的 CLI ...

  9. boost计算随机数和计算crc32简单示例 - jwybobo2007的专栏 - 博客频道 - CSDN.NET

    boost计算随机数和计算crc32简单示例 - jwybobo2007的专栏 - 博客频道 - CSDN.NET     boost::crc_32_type crc32;       crc32. ...

  10. OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

    近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...