div层叠居中问题请教

无·法 2014-05-28 02:17:46

先说下问题。本来是一张整图：

由于中间是要和input等元素对应的，所以不能使用滤镜方法sizingMethod='scale'来平铺。

于是我想到个办法中间部分独立出来，然后两边根据浏览器自适应延伸。我将两边切成细的图片放到两个div中横向平铺，中间的用个div居中就行了。

d3居中简单，使用position:relative;然后body里定义下元素都居中，可是试了很多办法都无法在IE将d3层叠于d1和d2的中间，不过下面的代码在firefox和chome下运行是正常的就是我需要的效果，在IE8下显示d3在d1和d2的下面，请教有什么办法解决吗？

<html>

<head>

<title>test1</title>

<STYLE type=text/css>

body {

text-align:center;

margin:0px;

}



div#d1 {

float:left;

width:50%;

height:100%;

background:url('img/bg1.jpg') repeat-x;

}



div#d2 {

float:left;

width:50%;

height:100%;

background:url('img/bg2.jpg') repeat-x;

}



div#d3 {

margin:0 auto;

background:url(img/bgmain.jpg) no-repeat 0 0;

width:1056px;

height:620px;

position:relative;

}

</STYLE>

</head>

<body >

<div id=d1 ></div>

<div id=d2 ></div>

<div id=d3 ></div>

</body>

</html>

测试网址：http://jindn.com/demo/testdiv/test0528.htm

...全文

1298 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

whatisma 2014-06-05

打赏
举报

引用 5 楼 sysdzw 的回复:

谢谢楼上的。我稍稍调整了下，将window.onload=function(){ 改成了： window.onresize=window.onload=function(){ 这样网页还原或者调整大小都可以自适应了。里面的input等元素也得在js里对应调整下，不然缩小就错位了。不过我很奇怪的是为什么我3楼的代码只在部分IE上是正常，在我机器上中间图片就直接没有了，不知道怎么回事。要是将ie7或者8改成标准模式发现还是会有问题，背景不见了。 http://jindn.com/demo/testdiv/test0528_absolute.htm

试试这个，我自己测试没问题。

<!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" xml:lang="en" lang="en">
	<head>
		<title>test1.html</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">
		body {
			text-align: center;
			margin: 0px;
		}
		
		div#d1 {
			width: 50%;
			height: 620px;
			background: url('img/bg1.jpg') repeat-x;
			position: absolute;
			left:0;
			z-index:1;
		}
		
		div#d2 {
			width: 50%;
			height: 620px;
			background: url('img/bg2.jpg') repeat-x;
			position: absolute;
			right:0;
			z-index:1;
		}
		
		div#d3 {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index:10;
		}
		
		div#d4 {
			background: url(img/bgmain.jpg) no-repeat 0 0;
			width: 1056px;
			height: 620px;
			margin: 0 auto;
		}
		</style>

	</head>

	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3">
			<div id="d4"></div>
		</div>
	</body>
</html>

无·法 2014-05-29

打赏
举报

谢谢楼上的。我稍稍调整了下，将window.onload=function(){ 改成了： window.onresize=window.onload=function(){ 这样网页还原或者调整大小都可以自适应了。里面的input等元素也得在js里对应调整下，不然缩小就错位了。不过我很奇怪的是为什么我3楼的代码只在部分IE上是正常，在我机器上中间图片就直接没有了，不知道怎么回事。要是将ie7或者8改成标准模式发现还是会有问题，背景不见了。 http://jindn.com/demo/testdiv/test0528_absolute.htm

人生难得一只鸡 2014-05-28

打赏
举报

尝试调整如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test1</title>
<STYLE type=text/css>
html,body {
text-align:center;
margin:0px;
height:100%;
}
 
div#d1 {
height:100%;
left:0;
background:url('http://jindn.com/demo/testdiv/img/bg1.jpg') repeat-x;
position:absolute;
}
 
div#d2 {
height:100%;
right:0;
background:url('http://jindn.com/demo/testdiv/img/bg2.jpg') repeat-x;
position:absolute;
}
 
div#d3 {
background:url('http://jindn.com/demo/testdiv/img/bgmain.jpg') no-repeat 0 0;
width:1056px;
height:620px;
margin:0 auto;
}
</STYLE>
<script>
window.onload=function(){
	var iClientW=Math.max(document.documentElement.clientWidth,document.body.offsetWidth);
	var d1=document.getElementById('d1');
	var d2=document.getElementById('d2');
	var d3=document.getElementById('d3');
	d1.style.width=d2.style.width=(iClientW-d3.offsetWidth)/2+'px';
}
</script>
</head>
<body >
<div id=d1 ></div>
<div id=d2 ></div>
<div id=d3 ></div>
</body>
</html>

无·法 2014-05-28

打赏
举报

黑色背景呢？

人生难得一只鸡 2014-05-28

打赏
举报

IE8下不正常？

无·法 2014-05-28

打赏
举报

根据高手的一些建议调整了下将div d3改用绝对定位，不过最终结果还是火狐谷歌可以，ie中不行，具体现象是d3看不见了。

具体代码：

<html>

<head>

<title>test1</title>

<STYLE type=text/css>

body {

text-align:center;

margin:0px;

}



div#d1 {

float:left;

width:50%;

height:100%;

background:url('img/bg1.jpg') repeat-x;

position: relative;

z-index:2;

}



div#d2 {

float:left;

width:50%;

height:100%;

background:url('img/bg2.jpg') repeat-x;

position: relative;

z-index:3;

}



div#d3 {

background:url(img/bgmain.jpg) no-repeat 0 0;

width:1056px;

height:620px;

position: absolute;

left:50%;

top:0;

margin-left:-528px;

z-index:4;

}

</STYLE>

</head>

<body >

<div id=d1 ></div>

<div id=d2 ></div>

<div id=d3 ></div>

</body>

</html>