关于CSS+div布局的问题

时间：2021-04-17 20:27:33
这个办法真的是麻烦啊,或许是没有找到诀窍.
页面框架是这样的,主页面分左,中,右三个部分
中又分为上,中左,中中和中右,下

firefox是正常的,但就是IE总是错位,请大伙分享下窍门,小生感激不尽.

HTML:
<!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" />
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="line_left"></div>
  <div id="line_right"></div>
  <div id="content">
    <!-- header -->
    <div id="header"></div>
    <!-- left -->
    <div id="left"> </div>
    <!-- right -->
    <div id="right"> </div>
    <!-- middle -->
    <div id="middle"> </div>
    <!-- footer -->
    <div id="footer"></div>
  </div>
</div>
</body>
</html>

CSS:
@charset "utf-8";
/* ---------------------frame-------------------------------- */
body {
text-align:center;
}
#container {
width:797px;
height:1080px;
margin:0 auto;
text-align:left;
clear:both;
}
#line_left {
background-image:url(../images/default_01.gif);
vertical-align:top;
background-repeat:repeat-y;
width:25px;
height:1080px;
float:left;
}
#line_right {
background-image:url(../images/default_03.gif);
background-repeat:repeat-y;
vertical-align:top;
width:25px;
height:1080px;
float:right;
}
#content {
margin: 0px;
padding:0px 25px 0px 25px;
}
/* ------------------head------------------------------*/
#header {
background:#66FF00;
width: 747px;
height:76px;
float:left;
}
/* ------------------left------------------------------*/
#left {
background:#66FF66;
width: 170px;
height:990px;
float:left;

}
/* ------------------middle------------------------------*/
#middle {
background:#000000;
margin: 0px;
padding:76px 576px 0px 170px;
height: 990px;

}
/* ------------------right------------------------------*/
#right {
background:#CCCCCC;
width: 576px;
height:990px;
float:right;

}
/* ------------------footer------------------------------*/
#footer {
background:#00FFFF;
width: 747px;
height:14px;
float:left;
}
无语了,请大家帮忙. 

15 个解决方案

#1

楼主是不是要这样的效果???? 



<style>

#main { width:800px;}

#topbanner { width:798px; height:100px; background-color:#00FF00;}

#content{ width:798px; height:700px;}

#content_left { width:169px; height:700px; float:left; background-color:#00FF00; border-right:1px solid black;}

*html #content_left { width:170px;}

#content_right { width:628px; height:700px; float:left; background-color:#CCCCCC;}

#footer1 { width:798px; height:16px; background-color:#00FFFF;}

#footer2 { width:798px; height:50px; background-color:#000000}

</style>

<div id="main">

	<!--最顶部-->

	<div id="topbanner">这里是页面头部</div>


	<!--中间部份,这里将会分开-->

	<div id="content">

		<div id="content_left"></div>

		<div id="content_right"></div>

	</div>


	<!--底部-->

	<div id="footer1">这里是底部绿色部份</div>

	<div id="footer2"><font color="#FFFFFF">这里是最底部</font></div>

</div>

#2

是这样,不过兄弟你的东西和我的一样也是在IE6下错位了.还是谢谢你

#3

改用百分数，宽度都改为百分数应该能解决这个问题
因为ie和ff差3px的宽度

#4

我这里测试通过 IE6 和 FF

#5

是DOCUMENT TYPE的问题.改过来后好了.
请兄台解释一下你各部分的计算方式好吗?

#6

还有*html #content_left是什么意思

#7

简单的说吧,你的代码OK
但是我的错在什么地方了,还请予以指出,感谢了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
/* ---------------------frame-------------------------------- */
body {
text-align:center;
}
#container {
width:800px;
height:1080px;
margin:0 auto;
text-align:left;
clear:both;
}
#line_left {
background-color:green;
width:25px;
height:1080px;
float:left;
}
#line_right {
background-color:green;
width:25px;
height:1080px;
float:right;
}
#content {
margin: 0px;
padding:0px 25px 0px 25px;
}
/* ------------------head------------------------------*/
#header {
background:#66FF00;
width: 747px;
height:76px;
float:left;
}
/* ------------------left------------------------------*/
#left {
background:#66FF66;
width: 170px;
height:990px;
float:left;
border-right:1px solid #336633;

}
*html #left {
    background:#66FF66;
width:171px;
}

/* ------------------right------------------------------*/
#right {
background:#CCCCCC;
width: 576px;
height:990px;
float:right;

}
/* ------------------footer------------------------------*/
#footer {
background:#336633;
width: 747px;
height:14px;
float:left;
}
</style>
</head>
<body>
<div id="container">
  <div id="line_left"></div>
  <div id="line_right"></div>
  <div id="content">
    <!-- header -->
    <div id="header">

    </div>
    <!-- left -->
    <div id="left"> </div>
    <!-- right -->
    <div id="right"> </div>
    <!-- footer -->
    <div id="footer"></div>
  </div>
</div>
</body>
</html>

#8

计算DIV的宽度,比如一个主容器,宽度为1000(只设width), 在这个主容器内有两个DIV,横向排列,一左一右, 那在不同margin和padding的情况下,里面这两个DIV的宽度和应正好等于1000, 如果设了左右margin的话,就要相应减去左右margin的值.

在某些情况IE和FF由于宽度或高度解释不同的时候,就要用到黑客方法来解决了,也就是你上面问到的
*html #content_left


就我上面的代码
由于content_right的div加了右边框,所以在FF下content_left和content_right的总宽度会大于798px, 
所以用*html #content_left这种方法另设IE宽度,而#content_left原来设为170的要减少左边DIV右边框的1px -- 非IE 不识别选择符 *html #content_left

#9

DIV的宽度计算问题,可能我解释的不太清晰, 楼主可以上网找下关于盒模型(BOX Model)的解释, 找些有图的,一看就明白了

#10

你把样式重置到它的父级 应该可以解决

#11

引用 8 楼 Cyril_Tam 的回复:
计算DIV的宽度,比如一个主容器,宽度为1000(只设width), 在这个主容器内有两个DIV,横向排列,一左一右, 那在不同margin和padding的情况下,里面这两个DIV的宽度和应正好等于1000, 如果设了左右margin的话,就要相应减去左右margin的值.

在某些情况IE和FF由于宽度或高度解释不同的时候,就要用到黑客方法来解决了,也就是你上面问到的
*html #content_left

就我上面的代码
由于content_right的div加了右边框,所以在FF下conten…

非常感谢这位朋友.
我也明白你说的盒子模型.但是现在是我觉得我的计算是正确的,但事实是它在FF下OK,在IE下NG.
现在我把我的代码整理一下再贴出来.并附上说明,希望能帮忙指点一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
/* ---------------------frame-------------------------------- */
body {
text-align:center;
}
#container { width:797px;height:1080px; margin:0 auto; text-align:left; clear:both;}
#line_left { width:25px; height:1080px; background-color:green; float:left;}
#line_right { width:25px; height:1080px; background-color:green; float:right;}
/*这就是主页面的容器,它的宽度应该是797-25*2=747px,然后我想在页面顶部设定一个header,中间设定左和右,下面设定一个footer*/
#content { margin: 0px; padding:0px 25px 0px 25px; }
/*header的宽度是744px*/
#header { width: 747px; height:76px; background:#66FF00; float:left;}
/*中部的左边部分设定为171px,其中有1px为右边框*/
#left { width: 170px; height:990px; background:#66FF66; float:left; border-right:1px solid #336633; }
*html #left { width:171px; background:#66FF66;  }
/*中部的右边设定为747-171=576px*/
#right { width: 576px; height:990px; background:#CCCCCC; float:right;}
/* ------------------footer------------------------------*/
#footer { width: 747px; height:14px; background:#336633; float:left;}
</style>
</head>
<body>
<div id="container">
  <div id="line_left"></div>
  <div id="line_right"></div>
  <div id="content">
    <!-- header -->
    <div id="header"></div>
    <!-- left -->
    <div id="left"> </div>
    <!-- right -->
    <div id="right"> </div>
    <!-- footer -->
    <div id="footer"></div>
  </div>
</div>
</body>
</html>
我不明白我的计算错在哪里了.经过实际的测试,我发现在IE里面,right部分不管宽度怎么设定,它都会跑到left的下面一行再居右.
但是那个主页面的容器也就是#content的宽度是未指定的,所以我觉得是不是这个地方有问题.
我不明白问题的关键在什么地方,请指点,感谢

#12

引用 10 楼 guanjia_cool 的回复:
你把样式重置到它的父级 应该可以解决

这位朋友请你说的详细一点吧

#13

你的布局太乱, 按照你的尺寸我改了一下 



<style>

#main { width:797px; height:1080px;}

#left{ width:25px; height:1080px; float:left; background-color:green;}

#right { width:25px; height:1080px; float:left; background-color:green;}

#middle { width:747px; height:1080px; float:left}

#topbanner { width:747px; height:76px; background-color:#00FF00;}

#content{ width:747px; height:990px;}

#content_left { width:169px; height:990px; float:left; background-color:#00FF00; border-right:1px solid black;}

*html #content_left { width:170px;}

#content_right { width:577px; height:990px; float:left; background-color:#CCCCCC;}

#footer1 { width:747px; height:14px; background-color:#00FFFF;}

#footer2 { width:798px; height:50px; background-color:#000000}

</style>

<div id="main">

	<div id="left"></div><!--左边绿线-->

	<div id="middle">

		<!--中间部份的顶头-->

		<div id="topbanner">这里是页面头部</div>



		<div id="content"><!--中间部份,这里将会分开左右两块-->

			<div id="content_left"></div>

			<div id="content_right"></div>

		</div>



		<div id="footer1">这里是底部绿色部份</div><!--中间部份的底部-->

		<!--<div id="footer2"><font color="#FFFFFF">这里是最底部</font></div>-->

	</div>

	<div id="right"></div><!--右边绿线-->

</div>


#14

如果你把padding设在这里的话#content { margin: 0px; padding:0px 25px 0px 25px; } 

那么以下四个DIV都会有PADDING

<!-- header --> 
    <div id="header"> </div> 
    <!-- left --> 
    <div id="left"> </div> 
    <!-- right --> 
    <div id="right"> </div> 
    <!-- footer --> 
    <div id="footer"> </div> 

如果你只是为了在left和right这两个DIV里设PADDING的话
<!-- left --> 
    <div id="left"> </div> 
    <!-- right --> 
    <div id="right"> </div> 

那把它设在
#left { width: 170px; height:990px; background:#66FF66; float:left; border-right:1px solid #336633; } 
#right { width: 576px; height:990px; background:#CCCCCC; float:right;} 
这两个里面, 然后它们的宽度width就要减去相应的padding值了

#15

感谢你Cyril_Tam老兄,问题解决.
刚开始用纯css+div做东西,问题比较多.
其实你刚才的代码到我的上面还是没法对齐,下面的footer那儿.
我强行设了一下字体大小后解决,可能14px对于我设的默认字体大小有点儿不够
以后有问题还想请教,感谢

#1

楼主是不是要这样的效果???? 



<style>

#main { width:800px;}

#topbanner { width:798px; height:100px; background-color:#00FF00;}

#content{ width:798px; height:700px;}

#content_left { width:169px; height:700px; float:left; background-color:#00FF00; border-right:1px solid black;}

*html #content_left { width:170px;}

#content_right { width:628px; height:700px; float:left; background-color:#CCCCCC;}

#footer1 { width:798px; height:16px; background-color:#00FFFF;}

#footer2 { width:798px; height:50px; background-color:#000000}

</style>

<div id="main">

	<!--最顶部-->

	<div id="topbanner">这里是页面头部</div>


	<!--中间部份,这里将会分开-->

	<div id="content">

		<div id="content_left"></div>

		<div id="content_right"></div>

	</div>


	<!--底部-->

	<div id="footer1">这里是底部绿色部份</div>

	<div id="footer2"><font color="#FFFFFF">这里是最底部</font></div>

</div>

#2

是这样,不过兄弟你的东西和我的一样也是在IE6下错位了.还是谢谢你

#3

改用百分数，宽度都改为百分数应该能解决这个问题
因为ie和ff差3px的宽度

#4

我这里测试通过 IE6 和 FF

#5

是DOCUMENT TYPE的问题.改过来后好了.
请兄台解释一下你各部分的计算方式好吗?

#6

还有*html #content_left是什么意思

#7

简单的说吧,你的代码OK
但是我的错在什么地方了,还请予以指出,感谢了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
/* ---------------------frame-------------------------------- */
body {
text-align:center;
}
#container {
width:800px;
height:1080px;
margin:0 auto;
text-align:left;
clear:both;
}
#line_left {
background-color:green;
width:25px;
height:1080px;
float:left;
}
#line_right {
background-color:green;
width:25px;
height:1080px;
float:right;
}
#content {
margin: 0px;
padding:0px 25px 0px 25px;
}
/* ------------------head------------------------------*/
#header {
background:#66FF00;
width: 747px;
height:76px;
float:left;
}
/* ------------------left------------------------------*/
#left {
background:#66FF66;
width: 170px;
height:990px;
float:left;
border-right:1px solid #336633;

}
*html #left {
    background:#66FF66;
width:171px;
}

/* ------------------right------------------------------*/
#right {
background:#CCCCCC;
width: 576px;
height:990px;
float:right;

}
/* ------------------footer------------------------------*/
#footer {
background:#336633;
width: 747px;
height:14px;
float:left;
}
</style>
</head>
<body>
<div id="container">
  <div id="line_left"></div>
  <div id="line_right"></div>
  <div id="content">
    <!-- header -->
    <div id="header">

    </div>
    <!-- left -->
    <div id="left"> </div>
    <!-- right -->
    <div id="right"> </div>
    <!-- footer -->
    <div id="footer"></div>
  </div>
</div>
</body>
</html>

#8

计算DIV的宽度,比如一个主容器,宽度为1000(只设width), 在这个主容器内有两个DIV,横向排列,一左一右, 那在不同margin和padding的情况下,里面这两个DIV的宽度和应正好等于1000, 如果设了左右margin的话,就要相应减去左右margin的值.

在某些情况IE和FF由于宽度或高度解释不同的时候,就要用到黑客方法来解决了,也就是你上面问到的
*html #content_left


就我上面的代码
由于content_right的div加了右边框,所以在FF下content_left和content_right的总宽度会大于798px, 
所以用*html #content_left这种方法另设IE宽度,而#content_left原来设为170的要减少左边DIV右边框的1px -- 非IE 不识别选择符 *html #content_left

#9

DIV的宽度计算问题,可能我解释的不太清晰, 楼主可以上网找下关于盒模型(BOX Model)的解释, 找些有图的,一看就明白了

#10

你把样式重置到它的父级 应该可以解决

#11

引用 8 楼 Cyril_Tam 的回复:
计算DIV的宽度,比如一个主容器,宽度为1000(只设width), 在这个主容器内有两个DIV,横向排列,一左一右, 那在不同margin和padding的情况下,里面这两个DIV的宽度和应正好等于1000, 如果设了左右margin的话,就要相应减去左右margin的值.

在某些情况IE和FF由于宽度或高度解释不同的时候,就要用到黑客方法来解决了,也就是你上面问到的
*html #content_left

就我上面的代码
由于content_right的div加了右边框,所以在FF下conten…

非常感谢这位朋友.
我也明白你说的盒子模型.但是现在是我觉得我的计算是正确的,但事实是它在FF下OK,在IE下NG.
现在我把我的代码整理一下再贴出来.并附上说明,希望能帮忙指点一下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
/* ---------------------frame-------------------------------- */
body {
text-align:center;
}
#container { width:797px;height:1080px; margin:0 auto; text-align:left; clear:both;}
#line_left { width:25px; height:1080px; background-color:green; float:left;}
#line_right { width:25px; height:1080px; background-color:green; float:right;}
/*这就是主页面的容器,它的宽度应该是797-25*2=747px,然后我想在页面顶部设定一个header,中间设定左和右,下面设定一个footer*/
#content { margin: 0px; padding:0px 25px 0px 25px; }
/*header的宽度是744px*/
#header { width: 747px; height:76px; background:#66FF00; float:left;}
/*中部的左边部分设定为171px,其中有1px为右边框*/
#left { width: 170px; height:990px; background:#66FF66; float:left; border-right:1px solid #336633; }
*html #left { width:171px; background:#66FF66;  }
/*中部的右边设定为747-171=576px*/
#right { width: 576px; height:990px; background:#CCCCCC; float:right;}
/* ------------------footer------------------------------*/
#footer { width: 747px; height:14px; background:#336633; float:left;}
</style>
</head>
<body>
<div id="container">
  <div id="line_left"></div>
  <div id="line_right"></div>
  <div id="content">
    <!-- header -->
    <div id="header"></div>
    <!-- left -->
    <div id="left"> </div>
    <!-- right -->
    <div id="right"> </div>
    <!-- footer -->
    <div id="footer"></div>
  </div>
</div>
</body>
</html>
我不明白我的计算错在哪里了.经过实际的测试,我发现在IE里面,right部分不管宽度怎么设定,它都会跑到left的下面一行再居右.
但是那个主页面的容器也就是#content的宽度是未指定的,所以我觉得是不是这个地方有问题.
我不明白问题的关键在什么地方,请指点,感谢

#12

引用 10 楼 guanjia_cool 的回复:
你把样式重置到它的父级 应该可以解决

这位朋友请你说的详细一点吧

#13

你的布局太乱, 按照你的尺寸我改了一下 



<style>

#main { width:797px; height:1080px;}

#left{ width:25px; height:1080px; float:left; background-color:green;}

#right { width:25px; height:1080px; float:left; background-color:green;}

#middle { width:747px; height:1080px; float:left}

#topbanner { width:747px; height:76px; background-color:#00FF00;}

#content{ width:747px; height:990px;}

#content_left { width:169px; height:990px; float:left; background-color:#00FF00; border-right:1px solid black;}

*html #content_left { width:170px;}

#content_right { width:577px; height:990px; float:left; background-color:#CCCCCC;}

#footer1 { width:747px; height:14px; background-color:#00FFFF;}

#footer2 { width:798px; height:50px; background-color:#000000}

</style>

<div id="main">

	<div id="left"></div><!--左边绿线-->

	<div id="middle">

		<!--中间部份的顶头-->

		<div id="topbanner">这里是页面头部</div>



		<div id="content"><!--中间部份,这里将会分开左右两块-->

			<div id="content_left"></div>

			<div id="content_right"></div>

		</div>



		<div id="footer1">这里是底部绿色部份</div><!--中间部份的底部-->

		<!--<div id="footer2"><font color="#FFFFFF">这里是最底部</font></div>-->

	</div>

	<div id="right"></div><!--右边绿线-->

</div>


#14

如果你把padding设在这里的话#content { margin: 0px; padding:0px 25px 0px 25px; } 

那么以下四个DIV都会有PADDING

<!-- header --> 
    <div id="header"> </div> 
    <!-- left --> 
    <div id="left"> </div> 
    <!-- right --> 
    <div id="right"> </div> 
    <!-- footer --> 
    <div id="footer"> </div> 

如果你只是为了在left和right这两个DIV里设PADDING的话
<!-- left --> 
    <div id="left"> </div> 
    <!-- right --> 
    <div id="right"> </div> 

那把它设在
#left { width: 170px; height:990px; background:#66FF66; float:left; border-right:1px solid #336633; } 
#right { width: 576px; height:990px; background:#CCCCCC; float:right;} 
这两个里面, 然后它们的宽度width就要减去相应的padding值了

#15

感谢你Cyril_Tam老兄,问题解决.
刚开始用纯css+div做东西,问题比较多.
其实你刚才的代码到我的上面还是没法对齐,下面的footer那儿.
我强行设了一下字体大小后解决,可能14px对于我设的默认字体大小有点儿不够
以后有问题还想请教,感谢
标签：

相关文章