欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

div左右布局页面 兼容ie6 ie7有关问题

更新时间: 2014-01-05 01:57:25 责任编辑: Author_N1

 

div左右布局页面 兼容ie6 ie7问题
本帖最后由 joygarden 于 2010-12-27 16:57:29 编辑

<!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-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#main{
overflow: hidden;
}
#left{
float:left;
width:252px;
text-align:center;
border:1px solid #000;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#right{
margin-left:252px;
text-align:center;
border:1px solid #f00;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="main">
    <div id="left">
        固定252px<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
    </div>
    <div id="right">
     按浏览器自适应<br/>1<br/>2<br/>3<br/>4<br/>5<br/>
    </div>
    </div>
</body>
</html>


页面左右布局 宽度左边固定 右边自适应,左右高度自自适应
目前在firefox和ie8兼容 但不兼容ie6,ie7要怎么改
--参考方法--
楼主想实现啥样的效果啊 我帮你重新写一套吧
--参考方法--
引用:
楼主想实现啥样的效果啊 我帮你重新写一套吧

简单说就是高度和宽度都自适应
具体是宽度左边固定 右边自适应
左右两边高度也是不确定的 任何一边都有可能很长 所以高度随左右最长的增长
--参考方法--
左右都用float:left,左边设宽,右边不设
在最后面加一个clear:both的div,应该可以满足你的需求
--参考方法--
你是想怎么实现同高呢。。有什么背景还是什么可以看出来!
--参考方法--

<!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-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.clearfix:after 
{ content:"."; display:block;height:0;clear:both; visibility:hidden;} 
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;} 
/* Hide from IE Mac */ 
.clearfix {display:block;}
.left{width:252px;float:left;display:inline;background:blue;}
.r_content{padding-right:252px;}
.right{float:left;display:inline;margin-right:-504px;padding-right:252px;width:100%;background:#ff0000;}
</style>
</head>
<body>
<div class="clearfix" id="main">
<div class="right" id="right">
<div class="r_content">某某劳而某某劳而无功 云蒸霞蔚云蒸霞某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸霞蔚塔顶栽植打法顶栽植顶栽植顶栽植塔霞蔚塔顶栽植打法塔霞蔚塔顶栽植打法塔蔚塔顶栽植打法塔城落地有声bbbbbbb声bbbbbb声bbbbbbbbb
</div>
</div>
<div class="left" id="left">a</div>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:57:25
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/3649/
本文WWW.DOC100.NET DOC100.NET版权所有。