《转》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 ...
随机推荐
- MONGODB的内部构造 FROM 《MONGODB THE DEFINITIVE GUIDE》
今天下载了<MongoDB The Definitive Guide>电子版,浏览了里面的内容,还是挺丰富的.是官网文档实际应用方面的一个补充.和官方文档类似,介绍MongoDB的内部原理 ...
- Oracle10g数据泵EXPDP和IMPDP备份与恢复数据
Oracle10g数据泵EXPDP和IMPDP备份与恢复数据 一.数据库备份前准备工作 新建备份DIRECTORY目录,并授权给用户 步骤: 1.登录sqlplus 账户名:ptemp 密码:0000 ...
- python进阶十_正則表達式(一)
近期状态一直不太好,至于原因,怎么说呢,不好说,总之就是纠结中覆盖着纠结,心思全然不在点上,希望能够借助Python的学习以及博客的撰写来调整回来,有的时候回头想一想,假设真的是我自己的问题呢,曾经我 ...
- Java 获取到配置文件信息
Java程序将数据库或者服务器IP写入到代码中,难免缺少灵活性. 如果写入到配置文件,部署到不通服务器上,只需要修改配置文 件即可. Java怎么读取配置文件 /** * 获取到配置文件信息 * @p ...
- js获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- VS2010对C++11的支持列表(感觉大部分都不支持)
c++11,就是之前的c++0x,已经成为了最新的c++标准.像咱这样天天用c++的,就赶紧follow一下.学习成果,放在这里,不说分享,至少自己增强下记忆. 首先,给出一些有用的链接. http: ...
- MySQL推出Applier,可实时复制数据到Hadoop
MySQL复制操作可以将数据从一个MySQL服务器(主)复制到其他的一个或多个MySQL服务器(从).试想一下,如果从服务器不再局限为一个MySQL服务器,而是其他任何数据库服务器或平台,并且复制事件 ...
- hdu4708 Rotation Lock Puzzle
Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- <?php echo "我的第一段 PHP 脚本!"; ?>
<!DOCTYPE html><html><body> <?phpecho "我的第一段 PHP 脚本!";?> </body ...
- hdoj 1286 找新朋友 【数论之欧拉函数】
找新朋友 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...