css如何设定实现li中内容底部对齐?

发布网友发布时间：2022-04-27 01:59

共7个回答

热心网友时间：2022-04-06 12:41

应该有用到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">

</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>

热心网友时间：2022-04-06 13:59

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>

热心网友时间：2022-04-06 15:34

直接用li+css可以实现但是效果不好以为不灵活

对于这种情况可做如下处理：
1.简单的静态页面如果仅仅是几个图片的话就放到一个表格中然后对其方式垂直对其选中底部
2.对于动态网页也就是图片不固定的
可以吧一个图片和下面的文字放到一个Div中然后 div的属性设float=left 这样在一个div中就可以很灵活的控制了

对于第二种方法不好调间距你可以先为div加上边框然后效果满意了就把边框去了

热心网友时间：2022-04-06 17:25

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>

热心网友时间：2022-04-06 19:33

热心网友时间：2022-04-06 21:58

XXX ul li{ min-height:xxx; min-width:xxx display:block; padding-top:xxx}
蒙的呵呵。。没试过同样很想知道怎么弄的

热心网友时间：2022-04-07 00:39

hi我