请教DIV怎么实现下对齐呀
日期：2014-05-17 浏览次数：20808 次
请问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:241
下面是我的代码:
要实现左边的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:241
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
