两栏自适应布局
2016-01-27 14:22
253 查看
第一种方法,采用左列 left 浮动,右列不浮动,采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外,当浏览器框缩小到一定程度时,右侧会掉下来。
#left{width:100px;height:100px;border:2px solid #333;float:left;}
#right{height:300px;margin-left:104px; border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br/>11</div>
第二种方法:采用左列向左浮动,右列绝对定位。为解决 ie6 下右列不撑开问题,在右列中设置一元素右浮动 ( 不是个好方法 )。
#sidebar{width:100px;height:100px;float:left;border:2px solid #333333;}
#Wrap{position:absolute;left:113px;right:5px;height:300px;border:2px solid #333333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
#floatSpan {float:right;} //for ie6
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
此中 wrap 的 right:0; 本是为撑开右列而设置。无奈 ie6 下无效。故设置了 floatSpan。有此之后,去除 float:right 也无影响于效果。
第三种方法,左列使用绝对定位,右列使用 margin-left 定位。
.left{width:100px;height:100px;border:2px solid #333;position:absolute;left:0; top:0; }
.right{height:300px;margin-left:104px;border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
<div style="position:relative;overflow:hidden;width:100%;"> <!-- 使用width是为了解决ie6下的bug -->
<div class="left"> left </div>
<div class="right"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right</div>
</div>
纵观前面的几种方法,不是使用了 margin-left 定位,就是借助 position 的 left 定位,这两种定位方法,都需要事先知道 left 列的宽度,扩展性上不是很好。
第四种方法,我们可以借助 ie 下的 haslayout 让 right 列触发 haslayout。而 FF 下则使用 overflow:hidden。
#left{float:left;width:100px;height:100px;border:2px solid #333;
}
#right{overflow:hidden;zoom:1; border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
#left{width:100px;height:100px;border:2px solid #333;float:left;}
#right{height:300px;margin-left:104px; border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br/>11</div>
第二种方法:采用左列向左浮动,右列绝对定位。为解决 ie6 下右列不撑开问题,在右列中设置一元素右浮动 ( 不是个好方法 )。
#sidebar{width:100px;height:100px;float:left;border:2px solid #333333;}
#Wrap{position:absolute;left:113px;right:5px;height:300px;border:2px solid #333333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
#floatSpan {float:right;} //for ie6
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
此中 wrap 的 right:0; 本是为撑开右列而设置。无奈 ie6 下无效。故设置了 floatSpan。有此之后,去除 float:right 也无影响于效果。
第三种方法,左列使用绝对定位,右列使用 margin-left 定位。
.left{width:100px;height:100px;border:2px solid #333;position:absolute;left:0; top:0; }
.right{height:300px;margin-left:104px;border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
<div style="position:relative;overflow:hidden;width:100%;"> <!-- 使用width是为了解决ie6下的bug -->
<div class="left"> left </div>
<div class="right"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right</div>
</div>
纵观前面的几种方法,不是使用了 margin-left 定位,就是借助 position 的 left 定位,这两种定位方法,都需要事先知道 left 列的宽度,扩展性上不是很好。
第四种方法,我们可以借助 ie 下的 haslayout 让 right 列触发 haslayout。而 FF 下则使用 overflow:hidden。
#left{float:left;width:100px;height:100px;border:2px solid #333;
}
#right{overflow:hidden;zoom:1; border:2px solid #333;background:#cccurl(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
相关文章推荐
- Journal工作原理
- iOS开发之边缘手势返回(解决自定义返回按钮手势无效)
- 设计模式之:命令模式(Command Pattern)
- git-rebase 超级详细讲解,我竟然看完了
- spring结合mongodb报错: 无法将名称 'repository:auditing-attributes' 解析为 'attribute group' 组件
- 网格剖分 Delaunay
- Android解析XML详解
- DJ Hell-艺术与浩室音乐相结合的化身
- 生成随机数-java工具类
- JS 截取字符串substr 和 substring方法的区别
- JSON与字符串互相转换的几种方法
- 三栏宽度自适应布局
- windows cmd下使用adb logcat命令
- java继承方法重写权限问题
- Android自学之sqlite数据的基本操作和事物的简单应用
- cc2640调试经验之 I2C驱动添加
- 隐藏系统键盘光标显示
- 实现ueditor + 图片空间 实现图片上传
- jquery indexOf使用方法
- 抽象自定义泛型小笔记