javascript - 如何在独立于图像高度的图像下适当地放置文本

Question

无论图像大小如何，将一组文本定位在图像下的最佳方法是什么？

例如，在下图中，我有第一组图像和第二组图像。

http://imgur.com/uNGvMd7

第一组图像，字体文本位于图像下方，但这取决于图像高度。

第二组是我希望它的外观 - 独立于图像高度，所有图像的字体文本将始终位于同一位置。

这是否需要 JS 脚本来确定图像的高度和位置？

提前致谢。

Answer 1

最好的方法是使用 div 和 CSS模拟表格布局。

这可以在不需要任何东西的绝对高度的情况下工作。

看这个演示。

HTML：

<div class="container">
    <div class="row">
        <div class="cell">
            <img src="http://dummyimage.com/200x300/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x200/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x100/000/fff" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
    </div>
</div>

CSS：

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 0 5px 10px;
    text-align: center;
}

.cell img {
    vertical-align: top;
}

编辑：display:table关于 IE 兼容性和响应性的布局有一些注意事项；见保罗的评论。

Answer 2

如果您知道各种图像的最大高度，则可以将每个图像包装在一个相同大小的块中，并在其下方加上标题。这也允许一致的宽度。

HTML：

<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/100" />
  </div>
  <figcaption>one</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/75" />
  </div>
  <figcaption>two</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/50/50" />
  </div>
  <figcaption>three</figcaption>
</figure>

CSS：

figure {
  display: inline-block;
}

.imgwrap {
  height: 100px;
  width: 100px;
}

figcaption {
  text-align: center;
}

一个工作示例：http ://codepen.io/paulroub/pen/auLcA