对准李的底部？
[英]Aligning to the bottom of an li?
问题描述
I want to do this without javascript. 
我想在没有JavaScript的情况下执行此操作。
I can't figure out how to make all li with class "item" align to the bottom of the div#recent. 我不知道如何使所有带有“ item”类的li与div＃recent的底部对齐。 Basically, every li is 192px wide. 基本上，每个li的宽度均为192px。 The problem is that each product image is a different height, so if one is only 40px tall, the text is at a different position than the one next to it. 问题在于，每个产品图片的高度都不相同，因此，如果一个图片高度仅为40px，则该文字的位置与旁边的图片的位置不同。
<div id="recent">
<h2>Recent Items</h2>
<ul>
<li class="item">
<img src="images/product1.png" />
<a href="#">
Product Name Here<br/>
Brand Name Here
</a>
<p>$182.32</p>
</li>
</ul>
</div>
Any ideas? 有任何想法吗？
4 个解决方案
解决方案1
0 2010-04-21 21:03:01
Have you tried using CSS? 您是否尝试过使用CSS？ On your div, set vertical-align:bottom, and set line-height & height to the same value? 在您的div上，设置vertical-align：bottom，并将line-height和height设置为相同的值？
解决方案2
0 已采纳 2010-04-21 21:15:35
Wrap your images in there own container (like another div) and give that container a specific height. 将图像包装在自己的容器中（例如另一个div），并为该容器指定特定的高度。
<div id="recent">
<h2>Recent Items</h2>
<ul>
<li class="item">
<div class = "img_wrapper"><img src="images/product1.png" /></div>
<a href="#">
Product Name Here<br/>
Brand Name Here
</a>
<p>$182.32</p>
</li>
</ul>
</div>
In your css, give .img_wrapper a height of 50px or whatever. 在您的CSS中，将.img_wrapper的高度设置为50px或其他值。
解决方案3
0 2011-07-27 18:28:45
Probably it is too late to submit an answer but I had the same problem recently. 提交答案可能为时已晚，但最近我遇到了同样的问题。 Here is a solution: 这是一个解决方案：
<head>
<style>
#recent ul {
list-style-type: none;
font-size: 17px;
} #recent li {
float: left;
} li div {
vertical-align: bottom;
height: 415px;/ *max height */
width: 285px;
display: table-cell;
}
</style>
</head>
<div id="recent">
<ul>
<li><div>
<img src="pic1.jpg" />
<p><a href="#">Product Name Here</a></p>
<p>$182.32</p>
</div></li>
<li><div>
<img src="pic2.jpg" />
<p><a href="#">Product Name Here</a></p>
<p>$182.32</p>
</div></li>
</ul>
</div>
But you still have to specify div's hight. 但是您仍然必须指定div的高度。 display: table-cell does the trick. display: table-cell可以解决问题。
解决方案4
0 2011-07-29 09:39:47
vertical_align is based on line-height of the parent element. vertical_align基于父元素的行高。 So 所以
li {height: 100px; line-height:100px}
p {vertical-align:bottom}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.