首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

请教DIV怎么实现下对齐呀

2012-02-27 
请问DIV如何实现下对齐呀?下面是我的代码:要实现左边的DIV和右边的TABLE的显示效果是一样的,下对齐.t1.css

请问DIV如何实现下对齐呀?
下面是我的代码:
要实现左边的DIV和右边的TABLE的显示效果是一样的,   下对齐.
t1.css:
.div_main
{
border:solid   1px   red;
        width:102px;
height:241px;
background-color:#CCCCCC;
vertical-align:bottom;
float:left;
}

.div1
{
height:auto;
margin-bottom:0px;
float:left;
}

#tb1
{
border:solid   1px   red;
        width:102px;
height:241px;
background-color:#CCCCCC;
float:left;
}

#tb1   td
{
vertical-align:bottom;
}

t1.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>
<title> 测试 </title>
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=GBK "   >
<link   href= "t1.css "   rel= "stylesheet "   type= "text/css "   >
</head>

<body>
<div   class= "div_main "   valign=bottom>
<div   class= "div1 "> abcde   abcde </div>
</div>
<table   id=tb1>
<tr>
<td   > abcde   abcde </td>
</tr>
</table>
</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>
<title> 测试 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=GBK " >
<style type= "text/css ">
#wrap { float:left;}
.div_main{ border:solid 1px red; width:204px; height:241px; background-color:#CCCCCC; vertical-align:bottom; float:left; }
.div1{ height:auto; margin-bottom:0px; float:left; }
#tb1{ border-left:solid 1px red; width:102px; height:241px; background-color:#CCCCCC; float:right; }
#tb1 td{ vertical-align:bottom; }
</style>
</head>
<body>
<div class= "div_main ">
<div class= "div1 "> abcde abcde </div>
<table id= "tb1 ">
<tr>
<td > abcde abcde </td>
</tr>
</table>
</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>
<title> 测试 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=GBK " >
<style type= "text/css ">
.div_main {
border:solid 1px red;
width:204px;
height:241px;
background-color:#CCCCCC;
float:left;
}
.div1 {
padding-top:220px;
float:left;
}
#tb1 {
border-left:solid 1px red;
width:102px;
height:241px;
float:right;


}
#tb1 td {
vertical-align:bottom;
}
</style>
</head>
<body>
<div class= "div_main ">
<div class= "div1 "> abcde abcde </div>
<table id= "tb1 ">
<tr>
<td > abcde abcde </td>
</tr>
</table>
</div>
</body>
</html>


[解决办法]
用嵌套呀!
<div>
<div> </div>
<div> </div>
<div> </div>
</div>


这样就是可以对齐的

热点排行