有3个div并排,如何让中间的div居中显示？

tantaiyizu 2008-04-15 11:11:14



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

	<title>div自适应</title>

	<style type="text/css">



		#dMain {

			margin:0 auto;

			width:90%;

		}

		#dLeft ,#dCenter ,#dRight {

			float:left;			/*统一设置float属性为left*/

			height:300px;		/*统一设置高度为300个像素*/

		}

		#dLeft {

			background:#C1C1FF;

		}

		#dCenter {

			width:380px;		/*固定中间部分为380个像素*/

			background:#FFC1FF;

		}

		#dRight {

			background:#C8E3E3;

		}

		#dRight div {width:100%;/*此处主要为了实现满屏显示*/}

	</style>

</head>

<body>

	<b>3个部分，中间宽度固定，左右根据内容自适应，如何实现不管左右的宽度怎样变化，dCenter始终居中？</b>

	<div id="dMain">

		<div id="dLeft">1111111</div>

		<div id="dCenter">2222222222222</div>

		<div id="dRight">

			<div>3333333333333</div>

		</div>

	</div>

</body>

</html>

...全文

3000 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

fteng78 2010-11-26

打赏
举报

看看六楼

terryoee 2009-09-09

打赏
举报

又需要看这个知识点，谢谢

myvicy 2008-04-16

打赏
举报

没看明白啥意思!!!

tantaiyizu 2008-04-16

打赏
举报

#6 的代码，解决了居中问题，但我想让默认左右两边宽度是100% ，就是现在不有两个空白，该怎么做呢？

tantaiyizu 2008-04-16

打赏
举报

谢谢风之石，谢谢大家

dh20156 2008-04-16

打赏
举报

6楼的代码在FF下，dLeft，dCenter，dRight都要加上：

display:table-cell;
vertical-align:top;

一把编程的菜刀 2008-04-16

打赏
举报

这个似乎不太可能，并排的，中间那个肯定会受到左右2个的宽度影响是偏左还是偏右，除非左右个宽度是一样大，不是一样大的话，基本上是不可能，难道要设置Z-INDEX值？使中间的在最上面一直居中？这个似乎不太理想

yongyuanjax 2008-04-16

打赏
举报

风之石厉害啊

myvicy 2008-04-16

打赏
举报

居中是正中?还是只要在左右的中间就可以了?再一个,左右的宽度可能值是多少?中间的宽度定了,左右的宽度如果加上中间的会不会超过屏幕的宽度?不管怎么变化这个要怎么去理解?

dh20156 2008-04-16

打赏
举报

凑合一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>div自适应</title>
<style type="text/css">
#dMain {
margin:0 auto;
width:90%;
display:table;
#position:relative;
}
#dLeft {
float:left;
height:300px;
background:#C1C1FF;
}
#dCenter {
display:table-cell;
align:center;
#position:absolute;
#left:50%;
width:380px;
height:300px;
}
#dCenter div{
#position:relative;
#left:-50%;
width:380px;
height:300px;
background:#FFC1FF;
}
#dRight {
float:right;
height:300px;
background:#C8E3E3;
}
</style>
</head>
<body>
<b>3个部分，中间宽度固定，左右根据内容自适应，如何实现不管左右的宽度怎样变化，dCenter始终居中？</b>
<div id="dMain">
<div id="dLeft">1111111</div>
<div id="dCenter"><div>2222222222222</div></div>
<div id="dRight">3333333333333</div>
</div>
</body>
</html>