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

时间：2022-06-25 22:28:42 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

/*左侧浮动，右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug*/
.con1 .left{ float:left;}
.con1 .right{ margin-left:170px; word-break:break-all; _margin-left:167px; /*IE6 3px bug*/}

/*左侧绝对定位，右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug*/
.con2{ position:relative;}
.con2 .left{ position:absolute; left:0; top:0;}
.con2 .right{ margin-left:170px;}

/*另外还有网上的一种方法，可能不用确定左侧宽度，利用那啥hasLayout原理，不是很明白，但是左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug*/
.con3 .left{ float:left; margin-right:8px; _margin-right:5px; /*IE6 3px bug*/}
.con3 .right{ overflow:hidden; word-break:break-all;}
</style>

<h1>两列宽度自适应测试</h1>
<div id="con1" class="con con1" title="左侧浮动，右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉">
	<div class="left">左侧浮动，右侧margin-left,IE6,7下在缩小到一定程度右侧会下沉,而且有一个 IE6 3px bug</div>
    <div class="right">Right
    	<div class="warp">测试子元素能否使用width:100%</div>
    </div>
</div>
<div id="con2" class="con con2" title="左侧绝对定位，右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug">
	<div class="left">左侧绝对定位，右侧margin-left,此方法有效的避免了右侧下沉和IE6 3px bug</div>
    <div class="right">Right
    	<div class="warp">测试子元素能否使用width:100%</div>
    </div>
</div>
<div id="con3" class="con con3" title="另外还有网上的一种方法，可能不用确定左侧宽度，利用那啥hasLayout原理，不是很明白，但是左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug">
	<div class="left">另外还有网上的一种方法，可能不用确定左侧宽度，利用那啥hasLayout原理，不是很明白，但是左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug</div>
    <div class="right">Right
    	<div class="warp">测试子元素能否使用width:100%</div>
    </div>
</div>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程