div左右布局页面兼容ie6 ie7有关问题-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20687 次

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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>

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

相关资料更多>

推荐阅读更多>

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