如何使用 CSS 在底部设置 div 必须？答案

【问题标题】：How to set the div must in the bottom using CSS?如何使用 CSS 在底部设置 div 必须？
【发布时间】：2010-01-27 20:38:48
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css layout

【解决方案1】：

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

您还可以使用以下方式简化 HTML：

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

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

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

img {display:block;}

【讨论】：

呃... ...我不能确保用户可以给我标准尺寸，但我可以限制最大尺寸。

【解决方案2】：

我一定遗漏了什么，因为这看起来很简单。

<style type="text/css">
.productItem {
  text-align: center;
}

<div class="productItem">
  <img src="whatever"><br style="clear: both;" />
  Text
</div>

也许还有更多我不明白的地方。

【讨论】：

【解决方案3】：

从您的屏幕截图来看，您的文字似乎始终位于图片下方，但在屏幕截图的右半部分，当小图片与大图片在同一行时，文字不会对齐（产品说明不在单元格底部）。这就是你要问的吗？当图像大小变化时，如何使文本全部对齐到行的底部？

您可以将包含所有产品的表格行设置为<tr valign="bottom">，这会将所有内容推到底部，将图像堆叠在文本顶部。这意味着小图像的底部都将相互对齐，而不是顶部对齐。如果您希望图像保持不变，但文本下降，则可以像这样设置图像 DIV 的样式：<div style="height:200px; width:200px; overflow:hidden; text-align:center;">。这将为较小的图像创建一个较大的占位符，以便它们下方的文本全部对齐，如果图像太大，它将被裁剪而不是拉伸并导致文本完全脱节。

【讨论】：

【解决方案4】：

我假设你有一个 productItem 容器

所以应该是这样的：

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

我不知道你为什么不想使用绝对定位，但在这种情况下这是唯一的解决方案（不给图像或 div 提供固定高度）。

此设置不会造成任何损害，并且适用于所有常见的现代浏览器，包括 ie6。您需要做的就是为产品文本指定一个不同的类名或使用不同的标签来寻址它。

css:

.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}

试试这个。应该可以完美运行

MidnightLightining 在上面编写了其他解决方案。对图像容器使用固定高度。

【讨论】：