html - 对准李的底部？

我想在没有JavaScript的情况下执行此操作。

我不知道如何使所有带有“ item”类的li与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>

有任何想法吗？

最佳答案

将图像包装在自己的容器中（例如另一个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或其他值。

关于html - 对准李的底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2686498/