Question

我想在没有javascript的情况下这样做。

我无法弄清楚如何使所有li与类“item”对齐div＃recent的底部。基本上，每个li都是192px宽。问题是每个产品图像的高度不同，因此如果一个图像只有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>

有什么想法吗？

Answer 1

您是否尝试过使用CSS？在你的div上，设置vertical-align：bottom，并设置line-height＆amp;高度到相同的值？

Answer 2

将图像包裹在自己的容器中（如另一个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>

在你的CSS中，给.img_wrapper高度为50px或其他任何东西。

Answer 3

提交答案可能为时已晚，但我最近遇到了同样的问题。这是一个解决方案：

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

但你还是要指定div的高度。 display: table-cell可以解决问题。

Answer 4

vertical_align基于父元素的行高。所以

li {height: 100px; line-height:100px}
p {vertical-align:bottom}

对齐李的底部？

4 个答案: