将顶部对齐的文本附加到一行底部对齐的图像的底部

Question

我有一排看起来像这样的图像：

[Image] [Image] [Image] [Image]

每个图像容器都有 div 类".image，每个图像容器都有一个唯一的 id（即"#image1"、"#image2" 等）。 CSS 看起来像这样：

.image {
      vertical-align: bottom;
      min-height: auto;
      min-width: auto;
      max-width: 126px;
    }

通过 jQuery，我能够成功地在单个图像下方附加文本，即：

$("#image1").append("my text");

此代码处于循环中，因此文本内容因图像 ID 而异。所以结果是这样的：

                [Image]
                some
[Image] [Image] long    [Image]
my text my text text    my text

问题是，当文本字符串较长时，它会将图像向上推。我需要它看起来完全像这样：

[Image] [Image] [Image] [Image]
my text my text some    my text
                long
                text

有什么方法可以实现吗？看起来我要附加的文本符合 .image CSS 规则，并且底部对齐文本。我需要的是底部对齐的图像和放置在图像底部的顶部对齐的文本。

更新：这是我的 HTML 的样子：

<ol>
<li class=“image” id=“image1”>
    <a href=“mylink1.com”>
        <img src=“/my/image1/source”>
    </a>
    my text
</li>
<li class=“image” id=“image2”>
    <a href=“mylink2.com”>
        <img src=“/my/image2/source”>
    </a>
    my text
</li>
<li class=“image” id=“image3”>
    <a href=“mylink3.com”>
        <img src=“/my/image3/source”>
    </a>
    some long text
</li>
<li class=“image” id=“image4”>
    <a href=“mylink4.com”>
        <img src=“/my/image4/source”>
    </a>
    my text
</li>
</ol>

Answer 1

在图像 div 上使用：vertical-align: top;：

片段：

$(document).ready(function() {
  var $images = $(".image");
  var text = ["smal text", "large textdslndsfj dsnfjsdnfkjdsfk jdsfjdsbfkj sbdfjkds", "small", "s"];
  $.each($images, function(index, value) {
    $(this).append(text[index]);
  })
})

.image {
  display: inline-block;
  width: 100px;
  position: relative;
  top: 0;
  vertical-align: top;
}
.image img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
</div>
<div class="image">
  <img src="https://pbs.twimg.com/profile_images/579210574661328897/NcZmjtOw.jpg" />
</div>
<div class="image">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Wikibooks-logo-es.svg/400px-Wikibooks-logo-es.svg.png" />
</div>
<div class="image">
  <img src="https://lh3.ggpht.com/iyjJLmHzdffIPboi3lEY2-3D5BXNcApoBZVgWJPZvC0K6xSzW6f8ewEbl7VPjM3kiOM=w300" />
</div>