html - 如何使用CSS设置底部必须的div？

Question

这是我的产品的div，你可以看到这样的演示:

    <div class="productItem">
        <div>
              <!--image -->
        </div>
        <div>
              <!--text -->
        </div>
   </div>

http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg

每个产品都有产品图片和产品文字。图像在顶部，文本在每个图像下方。但是你可以看到，图像可以有不同的大小，所以我不希望文本总是在底部而不是图像下方。除了分配绝对位置外，如何在底部布置文本必须。

Answer 1

可能值得考虑将您的图片设为标准尺寸。也许是大号和小号？当有人点击较小的图像时，您总是可以选择显示较大的图像吗？

您还可以使用如下方式简化您的 HTML:

<div class="productItem">
  <img class="large" />
  <p>Text</p>
</div>

这会让您根据图像更改 CSS(通过给它一个类)，并减少不必要的 div。

也许使用 block 强制图像显示在文本上方属性？

img {display:block;}