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

Answer 2

我必须遗漏一些东西，因为这看起来很简单。

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

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

也许还有更多，我不理解。

Answer 3

在屏幕截图中，您的文字看起来总是在图片下方，但在屏幕截图的右半部分，当小图片与较大图片位于同一行时，文字不会排列（产品描述不在单元格的底部）。那是你要问的吗？如何在图像大小变化时将文本全部对齐到行的底部？

您可以将包含所有产品的表格行设置为<tr valign="bottom">，这会将所有内容都推到底部，将图像堆叠在文本顶部。这意味着小图像的底部都会彼此对齐，而不是它们的顶部。如果你想让图像保持原样，但文字要向下，而是像这样设置图像DIV：<div style="height:200px; width:200px; overflow:hidden; text-align:center;">。这将为较小的图像创建一个更大的占位符，使得它们下面的文本都排成一行，如果图像太大，它将被裁剪而不是拉伸并导致文本全部脱节。

Answer 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在上面编写。使用固定高度的图像容器。

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

4 个答案: