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

段：

＆＃13;

$(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]);
  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: