负margin实现div的左右排版
来源:互联网 发布:gta5帧数怎么优化 编辑:程序博客网 时间:2024/05/18 13:30
使用负margin可以使当前的div左边能容纳下面的div浮动上来,因此把右边的div摆在前面,左边的摆后面,右边的使用负margin就能让左边的浮上来,这样就遮住了右边的左半部分,只要右边再内部使用一个div,外边距为左边的宽度就实现了左右的排版。
1、左边固定,右边自适应
2、右边固定,左边自适应,跟上一个最大的不同点就是,左右两个div容器的代码的前后位置换了,原因就是"float:rihgt"一定要在"float:left"前面。
3、左右各占一定百分比,这就简单了,把上面任意一种将200px改成比例值20%就实现了。
<div> <div style="float: right; margin: 0 0 0 -20%; width: 100%;"> <div style="margin: 0 0 0 20%; background: #e4e4e4;"> 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999"> 这是左边部分 </div> </div>
4、再加一栏,实现左中右三栏布局。这只要再加一栏,float为right的多空一些位置就行了。这里以按比例为例
<div> <div style="float: right; margin: 0 0 0 -40%; width: 100%;"> <div style="margin: 0 0 0 40%; background: #e4e4e4;"> 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999"> 这是左边部分 </div> <div style="float: left; width: 20%; background: #663333"> 这是中间部分 </div> </div>
请注意:以上代码中都没有设置高度,实际上左右高度是不一致的,如果要左右高度一致,请不要设置左右的高度,由内容自动撑开,然后在页面合适位置用js实现:
window.onload = window.onresize = function (){ var left = document.getElementById("doc-left"); var right = document.getElementById("doc-right"); var maxHeight = Math.max(left.clientHeight, right.clientHeight) + "px"; left.style.height = right.style.height = maxHeight;}
5、实现框架页的效果(左右可分别出现滚动条,页面无滚动条):只要左右div各加position: absolute; overflow: scroll; height: 100%;右边再加left: 200px;即实现了,这里用了绝对定位,因此float属性可以干掉了
<div> <div style="margin: 0 0 0 -200px; width: 100%; position: absolute; overflow: scroll; height: 100%; left: 200px;"> <div style="margin: 0 0 0 200px; background: #e4e4e4;"> 这里是右边部分 </div> </div> <div style="width: 200px; background: #669999; position: absolute; overflow: scroll; height: 100%;"> 这是左边部分 </div> </div>
- 负margin实现div的左右排版
- 负边距(negative margin)实现自适应的div左右排版
- 负margin实现左右布局
- 负边距(negative margin)实现自适应的div左右排版(一个宽度固定一个宽度自适应)”
- CSS 负margin 以及 -100%的理解和3列式左右排版理解
- 强大的负margin
- margin--负的margin的使用
- 负margin的一些应用
- 好用的负margin
- 负margin技术的应用
- CSS让未知高度div的内容垂直居中(table-cell 和 负margin)
- 负margin几种用法的总结
- 负margin使用注意的一个问题
- 浅谈如此有用的负margin
- 负margin对元素高度的影响
- div排版的经验
- 用float和margin实现左右布局
- 我知道你不知道的负Margin--负margin浅谈
- 倒水问题
- Fedora 安装
- (排序详解之 堆排序)
- Android实现图片预览浏览功能
- ubuntu清华大学更新服务器
- 负margin实现div的左右排版
- C语言中scanf()的用法!
- 大学里,有这样一群人
- NserviceBus翻译之FAQ:MsmqTransportConfig配置项
- UML关系(泛化,实现,依赖,关联(聚合,组合))
- UVa 573 The Snail(蜗牛)
- hdu 4681 String
- 多tomcat并行,用户名、密码及虚拟路径设置
- Linux系统中 bashrc 和 profile 的区别