日期:2014-05-17  浏览次数:20717 次

三层相套底端对齐问题,请css高手指教!!
我有个三层相套底端对齐问题:img在countbox_bar里,countbox_bar在countbox里
我想让他们都对齐底端,img和countbox_bar实现了,可countbox_bar和countbox却弄不好了,请css高手指教!!

#countbox   {

height:   180px;
width:   350px;
border:   1px   solid   #CCCCCC;
float:   left;
margin:   0px;
}
#countbox_bar   {
list-style-type:   none;
background-color:   #FFCC99;
width:   15px;
float:   left;
height:10px;
margin-right:   5px;
margin-left:   5px;
position   :   relative;

}
.countimg   {
        position:   absolute;
bottom:0;
}

<ul   id= "countbox ">
<li   id= "countbox_bar "> <img   src= "11.JPG "   height= "5px "   width= "15px "   class= "countimg "/> </li>
<li   id= "countbox_bar "> <img   src= "11.JPG "   height= "5px "   width= "15px "   class= "countimg "/> </li>
</ul>

------解决方案--------------------
是不是要这样?
<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>
* {
padding:0;
margin:0;
}
#countbox {
height: 180px;
width: 350px;
border: 1px solid #CCCCCC;
float: left;
margin: 0px;
position:relative;
}
#countbox_bar {
background-color: #FFCC99;
width:15px;
height:30px;
border: 1px solid #f00;
position:absolute;
bottom:0;
}
.countimg {
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<ul id= "countbox ">
<li id= "countbox_bar " style= "left:100px; "> <img src= "# " height= "5px " width= "15px " class= "countimg "/> </li>
<li id= "countbox_bar " style= "left:40px; "> <img src= "# " height= "5px " width= "15px " class= "countimg "/> </li>
</ul>
</body>
</html>

------解决方案--------------------
绝对定位的话不设置left就重叠一块勒
你可以动态设置它们的left值啊,呵呵
其他就不知道勒,我不是程序员,不太懂
------解决方案--------------------
加上这个就自动排列了

<script language= "javascript ">
window.onload=function(){
var bars = document.getElementById( "countbox ").childNodes;
for(var i=0;i <bars.length;i++){
bars[i].style.left=i*30+10;
}
}
</script>