div嵌套问题
小弟刚学DIV中间的哪两个红色小矩形像素我算好是320.为什么不能并列在一起而是上下。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Tra...
小弟刚学DIV
中间的哪两个红色小矩形像素我算好是320.为什么不能并列在一起而是上下。
<!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 type="text/css">
#top{
width:960px;
height:300px;
margin:0px auto 10px auto;
}
#logo{
background-color:#000000;
width:960px;
height:185px;
margin:5px auto auto 0px
}
#nve {
background:#333333;
width:960px;
height:105px;
margin:5px auto 0px auto
}
#main{
width:960px;
height:640px;
margin:10px auto 0px auto
}
#left{
width:310px;
height:640px;
background-color:#FF0000;
margin-right:10px;
float:left;
}
#left_top{
background-color:#000000;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#left_center {
background-color:#0000FF;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#left_btm {
background-color:#000000;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#center{
width:320px;
height:640px;
background-color:#CCCCCC;
float:left;
}
#center_top1{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
#center_top2{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
#center_center {
background-color:#00FF00
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#right{
background-color:#000000;
width:310px;
height:640px;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="logo"></div>
<div id="nve"></div>
</div>
<div id="main">
<div id="left">
<div id="left_top"></div>
<div id="left_center"></div>
<div id="left_btm"></div></div>
<div id="center">
<div id="center_top1"></div>
<div id="center_top2"></div>
<div id="center_center"></div>
<div id="center_btm"></div></div>
<div id="right"></div></div>
</div>
</body>
</html>
</head>
<body>
</body>
</html> 展开
中间的哪两个红色小矩形像素我算好是320.为什么不能并列在一起而是上下。
<!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 type="text/css">
#top{
width:960px;
height:300px;
margin:0px auto 10px auto;
}
#logo{
background-color:#000000;
width:960px;
height:185px;
margin:5px auto auto 0px
}
#nve {
background:#333333;
width:960px;
height:105px;
margin:5px auto 0px auto
}
#main{
width:960px;
height:640px;
margin:10px auto 0px auto
}
#left{
width:310px;
height:640px;
background-color:#FF0000;
margin-right:10px;
float:left;
}
#left_top{
background-color:#000000;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#left_center {
background-color:#0000FF;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#left_btm {
background-color:#000000;
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#center{
width:320px;
height:640px;
background-color:#CCCCCC;
float:left;
}
#center_top1{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
#center_top2{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
#center_center {
background-color:#00FF00
width:300px;
height:200px;
margin:10px 5px 10px 5px;
}
#right{
background-color:#000000;
width:310px;
height:640px;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="logo"></div>
<div id="nve"></div>
</div>
<div id="main">
<div id="left">
<div id="left_top"></div>
<div id="left_center"></div>
<div id="left_btm"></div></div>
<div id="center">
<div id="center_top1"></div>
<div id="center_top2"></div>
<div id="center_center"></div>
<div id="center_btm"></div></div>
<div id="right"></div></div>
</div>
</body>
</html>
</head>
<body>
</body>
</html> 展开
5个回答
展开全部
问题主要是出现在DIV的边距问题“margin”属性
margin属性的使用：
margin是控制层与层之间的距离，你设置的实际宽度应该是height+margin-left,margin-right的总值。
/* top1的实际宽度是160PX */
center_top1{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
/* top2的实际宽度是160PX */
#center_top2{
background-color:#FF0000;
width:150px;
height:200px;
margin:10px 5px 10px 5px;
float:left;
}
总宽度#center是320PX。现在我们来算下你设置的总宽度：
10PX+160PX+160PX=330PX
我给你一张CSS2.0盒模型层次平面示意图和3D示意图
这个是学习DIV+CSS必须知道的，呵呵。 也可以用以上他们的办法，直接在#center_top1，#center_top2中加入“display:inline; ”即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是的，
在IE 7 8 ，Firefox下都是可以的。
估计你的浏览器应该是IE 6 版本的。
magin和padding在IE6下是会出现众多问题的，其他的css属性也是如此。
那就用display:inline;来清除#center_top1，#center_top2里面的加倍边距。
在IE 7 8 ，Firefox下都是可以的。
估计你的浏览器应该是IE 6 版本的。
magin和padding在IE6下是会出现众多问题的，其他的css属性也是如此。
那就用display:inline;来清除#center_top1，#center_top2里面的加倍边距。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
应该是你的浏览器版本低兼容性不好。我用chrome IE8 等都测试。是可以并列的。
你可能用的是IE6.那么你尝试一下把margin左右减3PX试试。
你可能用的是IE6.那么你尝试一下把margin左右减3PX试试。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
浮动ie产生的双倍距离 #box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在#center_top1，#center_top2里面加句
display:inline;
经测试，问题解决了
在块中如果设置了浮动，而且又有margin或padding属性,必须要加display:inline;来解决IE中margin或padding属性值的加倍兼容问题。
display:inline;
经测试，问题解决了
在块中如果设置了浮动，而且又有margin或padding属性,必须要加display:inline;来解决IE中margin或padding属性值的加倍兼容问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
