修改CSS-margin属性打造DIV+CSS自适应布局
使用负margin可以使当前的div左边能容纳下面的div浮动上来,因此把右边的div摆在前面,左边的摆后面,右边的使用负margin就能让左边的浮上来,这样就遮住了右边的左半部分,只要右边再内部使用一个div,外边距为左边的宽度就实现了左右的排版。
1、左边固定,右边自适应
<div>
<div style="float: right; margin: 0 0 0 -200px; width: 100%;">
<div style="margin: 0 0 0 200px; background: #e4e4e4;">
这是右边部分
</div>
</div>
<div style="float: left; width: 200px; background: #669999">
这是左边部分
</div>
</div>
2、右边固定,左边自适应,跟上一个最大的不同点就是,左右两个div容器的代码的前后位置换了,原因就是"float:rihgt"一定要在"float:left"前面。
<div>
<div style="float: right; width: 200px; background: #669999">
这是右边部分
</div>
<div style="float: left; margin: 0 -200px 0 0; width: 100%;">
<div style="margin: 0 200px 0 0; background: #e4e4e4;">
这是左边部分
</div>
</div>
</div>
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>
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 >
这是左边部分
</div>
</div>
相关阅读
- 奇迹暖暖祈福福袋攻略 五套充值套装属性介绍
- 天猫闺蜜节测闺蜜属性值怎么玩 天猫闺蜜节活动答案一览
- IIS6.0组件的安装和FTP站点的建立及属性配置
- CSS filter滤镜属性及用法
- 在编辑MYSQL ODBC属性的时候提示 Invalid attribute string 解决方案
- 修改CSS-margin属性打造DIV+CSS自适应布局
- 揭秘Win8 电脑对 GPT 硬盘应用 OEM 分区属性
- win10以太网属性空白怎么办 win10以太网属性全空解决方法
- 淘宝商品属性怎么选择
- 在xp系统中,鼠标双击程序变成打开属性怎么办?
《修改CSS-margin属性打造DIV+CSS自适应布局》由网友“假洒脱”推荐。
转载请注明:http://www.modouwifi.com/jiaocheng/05201104292021.html