html - 对齐到一里的底部？

Question

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

我不知道如何让所有类为“item”的 li 与 div#recent 的底部对齐。基本上，每里都是 192px 宽。问题是每张产品图片的高度都不同，所以如果一张只有 40 像素高，则文本与旁边的图片的位置不同。

<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

将您的图像包裹在自己的容器中(就像另一个 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 或其他的高度。