困惑谁来为我解：div+css页面布局，三列，为什么在ie下能的到我期望的布局，在firefox下却乱成一团？

neverdead 2006-10-30 03:13:03

//css1.html
<html>
<head>
<title>CSS样式页</title>
<link href="css4.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="top">
<p>美国太平洋舰队</p>
</div>
<div id="content"> 
<div id="left"> 
<p>Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem </p>
</div>
<div id="mid">
<p>ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </p>
</div>
<div id="right">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
</div>
</div>
<div id="bottom">
<p>《检察日报》</p>
</div>
</body>
</html>

//css4.css
/* CSS Document */
body{
text-align:center;
margin: 10px;
font-family: "宋体";
font-size:12px;
border: 1px solid #0000ff;
}
#top{
width:800px;
margin:10px;
border:5px solid #00ff00;
}
#content{
width:800px;
margin:10px;
border:1px solid #ff0000;
}
#left{
background: #F1F1F1;
margin:4px;
width:260px;
float:left;
border:1px solid #0000ff;
}
#mid{
background: #DFF7FF;
margin:4px 1px;
width:260px;
float:left;
border:1px solid #0000ff;
}
#right{
background: #FFEBCC;
margin:4px;
width:260px;
float:right;
border:1px solid #0000ff;
}
#bottom{
background:#6891D2;
margin:5px;
width:800px;
border:1px solid #00ff00;
}

我已把页面放在
http://myjavaserver.com/~cnflood/css1.html
请各位大师帮忙看看啦~~

...全文

237 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

neverdead 2006-10-30

打赏
举报

为什么
#dybody {margin:10px auto;border:1px solid #630;width:800px;height:40px;}
所画的边框border:1px solid #630;能正确的把3个div给圈起来，
而我的
#content{
width:800px;
margin:10px;
border:1px solid #ff0000;
}
却只显示出一条红线？

neverdead 2006-10-30

打赏
举报

哪里可以学到关于如何编写遵循标准的页面代码呢?

neverdead 2006-10-30

打赏
举报

精彩！完美！
顺便问一下，楼上这些哪里学的阿？让我也去学习学习~

飘零雾雨 2006-10-30

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style type="text/css">
body {margin:0px;border:1px solid #00f;font-size:12px;text-align:center;}
#dytop {margin:10px auto;border:5px solid #00f;width:800px;}
#dybody {margin:10px auto;border:1px solid #630;width:800px;height:40px;}
#dyleft {float:left;width:31%;border:1px solid #00f;background: #F1F1F1;margin:4px;}
#dymid {float:left;width:31%;border:1px solid #00f;background: #DFF7FF;margin:4px;}
#dyright {float:left;width:31%;border:1px solid #00f;background: #FFEBCC;margin:4px;}
#dybottom {width:800px;margin:0 auto;border:1px solid #630;clear:both;}
</style>
</head>
<body>
<div id="dytop">美国太平洋舰队</div>
<div id="dybody">
<div id="dyleft">Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem</div>
<div id="dymid">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
<div id="dyright">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem</div>
</div>
<div id="dybottom">《检察日报》</div>
</body>
</html>

neverdead 2006-10-30

打赏
举报

一针见血，偶豁然开朗呐

neverdead 2006-10-30

打赏
举报

这个以前没有耍过呢，完全是边做边学~~

neverdead 2006-10-30

打赏
举报

嘿嘿，偶菜鸟一个~不大懂这个
楼上您可是我的指路人啊~~
马上去修改~~

ImN1 2006-10-30

打赏
举报

补充一句：
css的盒子单位计算还是比较容易的，只要掌握了具体的定义，不难

但是css的w3c标准和微软标准对float的区别就很大
如果习惯了微软标准的话，变成w3c标准完全需要换一种思维去理解

ImN1 2006-10-30

打赏
举报

只是你没有理解css标准

首先请使用w3c dtd，否则微软是按自己的标准去处理

content内容宽=800-10*2-1*2=778
left+mid+right=260*3=780>778
所以right会在第二行显示

text-align:center只会对text起作用，div需要用marign:0 auto;付诸实现

float是针对内容的，如果content没有具体内容，而内含的div全部为float时
content自适应高度为0（border另外计算）

bottom因为没有使用clear，它将随content的位置进行布局，
因为content的自适应高度为0，所以它将被float遮盖

neverdead 2006-10-30