margin+absolute布局:右栏固定主内容自适应 demo
2014-04-29 15:01
260 查看
margin+absolute布局:右栏固定主内容自适应 demo
头部Aside
侧边栏区域
Main
主内容区域
底部
#demo{width:80%;margin:auto;height:300px;}
#hd2,#ft2{height:50px;background-color:#aaa;}
#bd2{position:relative;margin:10px 0;}
#aside2{position:absolute;top:0;right:0;width:200px;background:#ccc;}
#main2{margin-right:210px;background-color:#aaa;}
#hd3,#ft3{height:50px;background-color:#aaa;}
#bd3{position:relative;margin:10px 0;}
#aside3{position:absolute;top:0;left:0;width:200px;background:#ccc;}
#main3{margin-left:210px;background-color:#aaa;}
#hd4,#ft4{height:50px;background-color:#aaa;}
#bd4{zoom:1;overflow:hidden;margin:10px 0;}
#aside4{float:left;width:200px;background:#ccc;}
#main4{margin-left:210px;background-color:#aaa;}
#bd5{
padding-left:210px;
}
#aside5{
float:left;
position:relative;
left:-210px;
width:200px;
margin-left:-100%;
background:red;
}
#main5{
float:left;
width:100%;
background:pink;
}
#hd5,#ft5{height:50px;background-color:#aaa;}
#hd6,#ft6{height:50px;background-color:#aaa;}
#bd6{zoom:1;overflow:hidden;margin:10px 0;padding-right:210px;}
#aside6{float:left;position:relative;right:-210px;width:200px;margin-left:-200px;background-color:#ccc;}
#main6{float:left;width:100%;background-color:#aaa;}
margin+absolute布局:左栏固定主内容自适应 demo
头部Aside
侧边栏区域
Main
主内容区域
底部
margin+float布局:左栏固定主内容自适应 demo
头部Aside
侧边栏区域
Main
主内容区域
底部
float + 负margin 方式
头部主内容栏自适应宽度
侧边栏固定宽度
底部
圣杯布局之左栏固定主内容自适应
头部主内容栏自适应宽度
侧边栏固定宽度
底部
相关文章推荐
- Oops, 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine error
- Xcode开发和调试总结
- 三分钟教你学Git(二)之命令索引
- 用background-size实现 背景图片自适应浏览器大小,但不变形
- mysql更新一个表里的字段等于另一个表某字段的值
- SpringMVC前传--SpringMVC(1)
- java class详解及反射机制
- iOS文件系统的管理
- 使用 vim + ctags + cscope + taglist 阅读源码 - bo博的个人空间 - 开源中国社区
- 黑马程序员—java中的异常
- WinDBG 技巧:如何生成Dump 文件(.dump 命令)
- 20140429收盘小结
- POJ 1163 The Triangle (简单线性dp)
- Android Volley完全解析(三),定制自己的Request
- DMP文件的生成和使用
- Core Foundation 框架【转】
- Core Animation之多种动画效果
- ubuntu13.04 设置宽带连接
- Android Volley完全解析(二),使用Volley加载网络图片
- Android 程序框架设计