三层相套底端对齐有关问题,请css高手指教!
日期：2014-05-17 浏览次数：20844 次
三层相套底端对齐问题,请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>
我有个三层相套底端对齐问题: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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
