css如何设定实现li中内容底部对齐？
校内网的相册是实用列表项（ul li）显示的。不过我发现所有li都是底部对齐，这样在图片换行的时候就不会出现横版和竖版的图片由于顶部间距不适合而引起的排列错乱问题。
想知道怎么设定CSS才能实现这种效果？
我没有设置，所有图片都是顶部对齐。
二楼，试过了，不起作用的
三楼，放在一个div里用CSS调试和直接在li上加CSS差别不大吧？
四楼，呵呵~ 这样可就把位置钉死了哦~ 由于横竖版照片高度不同，这样可不适用哦~
应该有用到JS的，至少图片截取这里有用到，观察可以看见图片宽度是一定的，还有文字那边应该是统一高度的我猜，下面是我的代码，主要就是li的底部对齐实现，关键代码display:inline-block;vertical-align:bottom;不想兼容，标准浏览器是可以有效果的IE8也可以应该，其实还有很多细节要考虑的，比如标签的选择和组合...因为懒，所以 - -
<!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=utf-8" />
<title></title>
<style type="text/css">
<!--
*{margin:0;padding:0}
ul{list-style:none;border:1px solid #ccc;width:500px;margin:50px auto;
}
li{display:inline-block;vertical-align:bottom;}
div{width:90px;overflow:hidden;border:1px solid #ccc;text-align:center;padding:4px;}
p{width:90px;overflow:hidden;}
span{display:block;text-align:center;height:30px;overflow:hidden;background-color:lime;}
-->
</style>
</head>
<body>
<ul>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明文字说明文字说明文字说明</span><!--文字层应该有一个高度的我猜-->
</li>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明</span>
</li>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明</span>
</li>
</ul>
</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=utf-8" />
<title></title>
<style type="text/css">
<!--
*{margin:0;padding:0}
ul{list-style:none;border:1px solid #ccc;width:500px;margin:50px auto;
}
li{display:inline-block;vertical-align:bottom;}
div{width:90px;overflow:hidden;border:1px solid #ccc;text-align:center;padding:4px;}
p{width:90px;overflow:hidden;}
span{display:block;text-align:center;height:30px;overflow:hidden;background-color:lime;}
-->
</style>
</head>
<body>
<ul>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明文字说明文字说明文字说明</span><!--文字层应该有一个高度的我猜-->
</li>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明</span>
</li>
<li>
<div><p><img src="" alt="" /></p></div>
<span>文字说明</span>
</li>
</ul>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2018-05-10
1.简单的静态页面 如果仅仅是几个图片的话就放到一个表格中 然后对其方式 垂直对其 选中底部
2.对于动态网页 也就是图片不固定的 可以吧一个图片和下面的文字放到一个Div中 然后 div的属性设float=left 这样在一个div中就可以很灵活的控制了 对于第二种方法不好调间距 你可以先为div加上边框 然后效果满意了 就把边框去了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt{
height:246px;
width:512px;
border:1px solid #000000;
position:relative
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">网页特效</a></p>
</div>
</body>
</html>本回答被网友采纳
2.对于动态网页 也就是图片不固定的 可以吧一个图片和下面的文字放到一个Div中 然后 div的属性设float=left 这样在一个div中就可以很灵活的控制了 对于第二种方法不好调间距 你可以先为div加上边框 然后效果满意了 就把边框去了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt{
height:246px;
width:512px;
border:1px solid #000000;
position:relative
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">网页特效</a></p>
</div>
</body>
</html>本回答被网友采纳
第2个回答 2010-03-03
直接用li+css可以实现 但是效果不好 以为不灵活
对于这种情况可做如下处理：
1.简单的静态页面 如果仅仅是几个图片的话就放到一个表格中 然后对其方式 垂直对其 选中底部
2.对于动态网页 也就是图片不固定的
可以吧一个图片和下面的文字放到一个Div中 然后 div的属性设float=left 这样在一个div中就可以很灵活的控制了
对于第二种方法不好调间距 你可以先为div加上边框 然后效果满意了 就把边框去了本回答被网友采纳
对于这种情况可做如下处理：
1.简单的静态页面 如果仅仅是几个图片的话就放到一个表格中 然后对其方式 垂直对其 选中底部
2.对于动态网页 也就是图片不固定的
可以吧一个图片和下面的文字放到一个Div中 然后 div的属性设float=left 这样在一个div中就可以很灵活的控制了
对于第二种方法不好调间距 你可以先为div加上边框 然后效果满意了 就把边框去了本回答被网友采纳
第3个回答 2020-06-06
1.简单的静态页面
如果仅仅是几个图片的话就放到一个表格中
然后对其方式
垂直对其
选中底部
2.对于动态网页
也就是图片不固定的
可以吧一个图片和下面的文字放到一个Div中
然后
div的属性设float=left
这样在一个div中就可以很灵活的控制了
对于第二种方法不好调间距
你可以先为div加上边框
然后效果满意了
就把边框去了
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style
type="text/css">
#txt{
height:246px;
width:512px;
border:1px
solid
#000000;
position:relative
}
#txt
p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div
id="txt">
<p><a
href="#"
target="_blank">网页特效</a></p>
</div>
</body>
</html>
如果仅仅是几个图片的话就放到一个表格中
然后对其方式
垂直对其
选中底部
2.对于动态网页
也就是图片不固定的
可以吧一个图片和下面的文字放到一个Div中
然后
div的属性设float=left
这样在一个div中就可以很灵活的控制了
对于第二种方法不好调间距
你可以先为div加上边框
然后效果满意了
就把边框去了
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style
type="text/css">
#txt{
height:246px;
width:512px;
border:1px
solid
#000000;
position:relative
}
#txt
p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div
id="txt">
<p><a
href="#"
target="_blank">网页特效</a></p>
</div>
</body>
</html>
第4个回答 2010-03-03
<ul>
<li valign="bottom"><img src="inages/aa.jpg"></li>
</ul>
<li valign="bottom"><img src="inages/aa.jpg"></li>
</ul>