61,112
社区成员
发帖
与我相关
我的任务
分享css为何不起作用
我初学css+div，在dw8编辑器里联系写css，在设计模式下看到一切都是我想要的样子--大框里边小框2行3列，但是用浏览器看的话只有边框样式有，浮动样式没有了大框里边小框只有一列
代码如下：
<!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">
div{border-style:solid;
border-width:1px;
border-color:#0099FF;
float:left;
padding:5px;
margin:5px;
width:300px;
height:300px}
#11{
width:970px;
height:600px;
}
.clear{clear:both}
</style>
</head>
<body>
<div id="11">
<div id="22">此处显示 id "22" 的内容</div>
<div id="33">此处显示 id "33" 的内容</div>
<div id="44">此处显示 id "44" 的内容</div>
<div id="55">此处显示 id "55" 的内容</div>
<div id="66">此处显示 id "66" 的内容</div>
<div id="77">此处显示 id "77" 的内容</div>
<div id="88" class="clear">此处显示 id "88" 的内容</div>
</div>
</body>
</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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{border-style:solid;
border-width:1px;
border-color:#0099FF;
float:left;
padding:5px;
margin:5px;
width:300px;
height:300px}
#11{
width:970px;
height:600px;
}
.clear{clear:both}
</style>
</head>
<body>
<div id="11">
<div id="22">此处显示 id "22" 的内容</div>
<div id="33">此处显示 id "33" 的内容</div>
<div id="44">此处显示 id "44" 的内容</div>
<div id="55">此处显示 id "55" 的内容</div>
<div id="66">此处显示 id "66" 的内容</div>
<div id="77">此处显示 id "77" 的内容</div>
<div id="88" class="clear">此处显示 id "88" 的内容</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
夜雨_Jason 2009-06-12
- 打赏
- 举报
这样子？
<!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">
.div1{
border:1px solid #0099FF;
float:left;
padding:5px;
margin:5px;
width:300px;
height:300px
}
#div2{
width:970px;
height:1000px;
border:1px solid #0099FF;
}
.clear{
clear:both
}
</style>
</head>
<body>
<div id="div2">
<div class="div1">此处显示 id "22" 的内容 </div>
<div class="div1">此处显示 id "33" 的内容 </div>
<div class="div1">此处显示 id "44" 的内容 </div>
<div class="div1">此处显示 id "55" 的内容 </div>
<div class="div1">此处显示 id "66" 的内容 </div>
<div class="div1">此处显示 id "77" 的内容 </div>
<div class="clear div1">此处显示 id "88" 的内容 </div>
</div>
</body>
</html> 
lilimaty 2009-06-12
- 打赏
- 举报
id, class 都不要用数字开头，
你把那些id 都改成字母开头，再把样式表做些修改就正常了
<!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">
div { border: 1px solid #0099FF; float:left; padding:5px; margin:5px; }
#d11 { width:970px; }
#d11 div { width:300px; height:300px}
</style>
</head>
<body>
<div id="d11">
<div id="d22">此处显示 id "22" 的内容 </div>
<div id="d33">此处显示 id "33" 的内容 </div>
<div id="d44">此处显示 id "44" 的内容 </div>
<div id="d55">此处显示 id "55" 的内容 </div>
<div id="d66">此处显示 id "66" 的内容 </div>
<div id="d77">此处显示 id "77" 的内容 </div>
<div id="d88">此处显示 id "88" 的内容 </div>
</div>
</body>
</html>
你把那些id 都改成字母开头，再把样式表做些修改就正常了
<!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">
div { border: 1px solid #0099FF; float:left; padding:5px; margin:5px; }
#d11 { width:970px; }
#d11 div { width:300px; height:300px}
</style>
</head>
<body>
<div id="d11">
<div id="d22">此处显示 id "22" 的内容 </div>
<div id="d33">此处显示 id "33" 的内容 </div>
<div id="d44">此处显示 id "44" 的内容 </div>
<div id="d55">此处显示 id "55" 的内容 </div>
<div id="d66">此处显示 id "66" 的内容 </div>
<div id="d77">此处显示 id "77" 的内容 </div>
<div id="d88">此处显示 id "88" 的内容 </div>
</div>
</body>
</html>
tobeno2 2009-06-12
- 打赏
- 举报
<div id="88" class="clear">此处显示 id "88" 的内容 </div>
这里的问题吧。
这里的问题吧。
