css 两列宽度自适应三种测试例子

两列宽度自适应测试

左侧浮动，右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug

Right

测试子元素能否使用width:100%

左侧绝对定位，右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug

Right

测试子元素能否使用width:100%

计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug">

另外还有网上的一种方法，可能不用确定左侧宽度，利用那啥hasLayout原理，不是很明白，但是左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug

Right

测试子元素能否使用width:100%

时间： 2024-07-30 01:41:19

css 两列宽度自适应三种测试例子的相关文章

div+css 三列自适应等高且中列宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css实现二列宽度自适应实例

从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值:  代码如下 复制代码 #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { bac

css实现div两列高度自适应实例介绍

方法一: 纯CSS实现高度自适应:  代码如下 复制代码 .content{ overflow:hidden; } .left, .center, .right{ padding-bottom:500px; margin-bottom:-500px;}   方法二: 以下JS代码添加到</body>结束之前:  代码如下 复制代码 <script type="text/javascript"> <!– var l=document.getElementBy

CSS网页布局入门教程6：左列固定，右列宽度自适应_基础教程

左列--固定(AA25.CN) 右列--宽度自适应(AA25.CN)

CSS网页布局入门教程5：二列宽度自适应_基础教程

左列--(AA25.CN) 右列--二列宽度自适应(AA25.CN)

一列宽度自适应布局

问题描述 本帖最后由 巴味人 于 2015-3-5 11:53 编辑 一列宽度自适应布局 #layout{ background-color:#cccccc; border:2px solid #333333; width:80%; height:300px; } 一列宽度自适应布局 解决方案 很不错的啊static/image/common/sigline.gif90%打工小伙一生都不可能知道的秘密http://user.qzone.qq.com/82175487

css样式导入网页的三种方法

css样式导入网页的三种方法, 仔细一点的朋友都会发现很多大的门户站他们是直接把css写在了文档里面,页也有很多站有link链接也有一些站用import像taobao等.那么他们有什么优点与缺点呢?下面我们来看看吧.  一:直接写在页面里面css 与页面同时被加载,这样的好处可以减少服务器的链接线程这就是为什么大型站都直接写在了文档里面了,因为流量大处处要考虑的. 二:link是导入外部的这样自然要等页面内容加载完之后才加载link的样式了,这样就容易出现网速慢时加载中断,页面显示乱乱的哦我想各

DIV+CSS：网页一行两列背景自适应

网页布局中常有的一种情况就是网页主体部分分成一行两列:而在很多种情况下,设计师们常把左右两列的背景色设计成不同色彩,以实现内容块的明显区分:但这样的设计给布局提出了一个看似简单,而实现非常难的问题:那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样:右边内容高于左边时,左边背景色也要和右边一样: 当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案:多数人用很大的负数实现,也有人用javascript实现: 后来因为感觉这样实现不合理,所以我一直用表

三列宽度自适应结构中的的DIV写法

 适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应. CSS #main{ width:760px; margin:0 auto; } .left{ width:100px; float:left; } .right{ width:120px; float:right; } .center{ margin:0 120px 0 100px; width:auto; } .clear{clear: both;} HTML <!--注意:center这个DIV的位置--> <div id