div+css不知道哪里有问题,始终搞不定,请帮帮我吧

taishan0263 2007-12-14 11:10:35
代码如下,效果图见附件,请帮忙指出错误,谢谢

<!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="active carbon" content="text/html; charset=utf-8" />
<title> welcome to carbonbiz </title>
<link rel="stylesheet" title="对于“在浏览器中预览”为禁用: css/master.css" type="text/css" />
<style type="text/css">
<!--

/* CSS Document */

/*页面层容器*/
#con { width:100%; margin:auto;}


/*pic1*/
#pic1 {
width:363px;
height:363px;
background-color:red;
margin:0px 0px 1px 0px;
float:left;
}

/*pic2*/
#pic2 {
width:181px;
height:181px;
margin:0px 0px 1px 1px;
float:both;
}

/*pic3*/
#pic3 {
width:181px;
height:181px;
margin:0px 0px 0px 0px;
background-color:yellow;
}

/*pic4*/
#pic4 {
width:181px;
height:181px;
margin:1px 1px 0px 0px;
float:left;clear:left;
background-color:black
}

/*pic5*/
#pic5 {
width:181px;
height:181px;
margin:1px 0px 0px 0px;
float:left;
background-color:#999999
}

/*pic6*/
#pic6 {
width:181px;
height:181px;
margin:1px 0px 0px 1px;
float:left; clear:right;
background-color:#FFFF00
}


-->
</style>
</head>

<body>
<div id="con">
<div id="pic1"> </div>
<div id="pic2"> </div>
<div id="pic3"> </div>
<div id="pic4"> </div>
<div id="pic5"> </div>
<div id="pic6"> </div>
</div>
</body>
</html>
...全文
90 点赞 收藏 13
写回复
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
gsjackpeng 2010-09-16
楼主这个问题解决了吗,我也是这种问题,不知道有什么方法说下
回复
taishan0263 2007-12-15
可能是不习惯吧

还是感觉TABLE省事,至少不用一个浏览器一个浏览器的试验
回复
yixianggao 2007-12-15
其实俺平时table用滴比div多,哈
回复
yixianggao 2007-12-15
OK,改一点儿!IE6sp1下好了!
FF下楼主自己测!
L@_@K

#c456
{
width: 545px;
height: 181px;
clear: left;
}
回复
taishan0263 2007-12-15
我是这么做的啊,可是还是有问题
难道是我的IE有问题?
回复
yixianggao 2007-12-15
不对,真滴有问题,俺刚才用EditPlus内置浏览器调试滴没问题,应该是IE内核才对?!

刚才用IE6sp1看了一下,果然歪了!
稍等俺调调看!
回复
yixianggao 2007-12-15
To taishan0263

把4楼滴全部代码保存为html页,包括doctype!
俺就IE6调试滴,没问题,与贴图顺序完全一致!!
注:俺不用FF!
回复
taishan0263 2007-12-15
我发现问题了
大侠,您的代码用FIREFOX浏览器是完全正确的,但为什么一用IE6预览就出问题呢?
回复
taishan0263 2007-12-15
大侠,还是不行啊
4怎么会在3的下面呢?
4和5应该在1的下面
6在3的下面才对啊
回复
yixianggao 2007-12-15
原来是要精确控制,哈
所有间距都是1px,L@_@K
<!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>
<title>css.div.layoutControl.html</title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
#con
{
}

#pic1
{
color: white;
background-color: black;
width: 363px;
height: 363px;
margin-right: 1px;
margin-bottom: 1px;
float: left;
}

#c23
{
width: 181px;
height: 363px;
float: left;
}
#pic2
{
color: white;
background-color: black;
width: 181px;
height: 181px;
margin-bottom: 1px;
}
#pic3
{
color: white;
background-color: black;
width: 181px;
height: 181px;
}

#c456
{
width: 545px;
height: 181px;
}
#pic4
{
color: white;
background-color: black;
width: 181px;
height: 181px;
margin-right: 1px;
float: left;
}
#pic5
{
color: white;
background-color: black;
width: 181px;
height: 181px;
margin-right: 1px;
float: left;
}
#pic6
{
color: white;
background-color: black;
width: 181px;
height: 181px;
float: left;
}
</style>
</head>
<body>
<h3>div 布局精确控制</h3>
<div id="con">
<div id="pic1">1</div>
<div id="c23">
<div id="pic2">2</div>
<div id="pic3">3</div>
</div>
<div id="c456">
<div id="pic4">4</div>
<div id="pic5">5</div>
<div id="pic6">6</div>
</div>
</div>
</body>
</html>
回复
power_zl 2007-12-15
<!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="active carbon" content="text/html; charset=utf-8" />
<title>welcome to carbonbiz</title>
<link rel="stylesheet" title="对于“在浏览器中预览”为禁用:css/master.css" type="text/css" />
<style type="text/css">
<!--

/*CSS Document */

/*页面层容器*/
#con {width:100%;margin:auto;
color:#ffffff;
}

/*pic1*/
#pic1 {
width:363px;
height:363px;
background-color:red;
margin:0px 0px 1px 0px;
float:left;
}

/*pic2*/
#pic2 {
width:181px;
height:181px;
margin:0px 0px 1px 1px;
float:both;
background-color:#999999;
}

/*pic3*/
#pic3 {
width:181px;
height:181px;
margin:0px 0px 0px 0px;
background-color:blue;
}

/*pic4*/
#pic4 {
width:181px;
height:181px;
margin:1px 1px 0px 0px;
float:left;clear:left;
background-color:black;
}

/*pic5*/
#pic5 {
width:181px;
height:181px;
margin:1px 0px 0px 0px;
float:left;
background-color:green;
}

/*pic6*/
#pic6 {
width:181px;
height:181px;
margin:1px 0px 0px 1px;
float:left;
clear:right;
background-color:#FF0000;
}


-->
</style>
</head>

<body>
<div id="con">
<div id="pic1">pic1</div>
<div id="pic2">pic2</div>
<div id="pic3">pic3</div>
<div id="pic4">pic4</div>
<div id="pic5">pic5</div>
<div id="pic6">pic6</div>
</div>
</body>
</html>

蛮好的,没什么问题啊
回复
taishan0263 2007-12-15
楼上的大侠,就是实现不了呀,附件中的图是我想要实现的效果,但代码始终有问题,请帮帮我吧
回复
yixianggao 2007-12-15
挺好滴呀,到底要问啥?!
回复
发动态
发帖子
CSS
创建于2007-09-28

5.9w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
社区公告
暂无公告