如何将缩略图放在底部？

Question

我有一个缩略图div：

如何将选定的div放在底部？

像这样：

http://jsfiddle.net/jJzu5/

HTML：

<td>
  <div class="thumbnail">
    <img class="thumbnail" src="abc.jpg">
  </div>
</td>
<td>
  <div class="thumbnail">
    <img class="thumbnail" src="def.jpg">
  </div>
</td>
<td>
  <div class="thumbnail">
    <img class="thumbnail" src="ghk.jpg">
  </div>
</td>
<td>
  <div>
    ... // <-- this has to be at the bottom            
  </div>
</td>

的CSS：

div.thumbnail {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  position: relative;
  float: left;
  border: 1px #aaa solid;
}
img.thumbnail {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90%;
    max-width: 90%;
}

更新

请查看jsfiddle-link：http://jsfiddle.net/jJzu5/

vertical-align无效。

UPDATE2：

上传了所需的外观（在顶部）

Answer 1

对不起，现在我明白你的意思了。您只需要添加一个包含display: table的包装，然后将文本div设置为display: table-cell，它应该按照您想要的方式运行：

div.wrapper {    display: table;
}

div.downloads_thumbnail {
  width: 50px;
  height: 50px;
  border: 3px #000 solid;
  position: relative;
  float: left;
}

div.thumbText { 
    display: table-cell;
    vertical-align: bottom;  
}


img.downloads_thumbnail {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 50px;
    max-width: 50px;
}

和

    <div class="wrapper">
    <div class="downloads_thumbnail">
        <img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
    </div>
    <div class="downloads_thumbnail">
        <img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
    </div>
    <div class="downloads_thumbnail">
        <img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
    </div>
    <div class="downloads_thumbnail">
        <img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
    </div>
    <div class="thumbText">
         ...
    </div>
</div>    

http://jsfiddle.net/thespacebean/jJzu5/3/

Answer 2

您是否尝试过使用margin-top？我相信这会有用，如果没有，那么尝试添加一些填充。所以文本应该在底部。

在你的小提琴中，问题是，带有图像的div位于左侧，所以你不能把它放在它的前面。你可以亲眼看看吧！

由于那里提供的图像太大而且没有排成一行，我给它一个位置：绝对并在那里对齐。其他方法是保证金。

您正在使用tr，因此div将是内联的，即表格行（tr）。这就是为什么它漂浮在那里。

Jsfiddle：http://jsfiddle.net/afzaal_ahmad_zeeshan/jJzu5/2/

Answer 3

试试css：

vertical-align: bottom;

文档：http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 4

您使用的是<tr>元素吗？如果没有，请将现有的<td>元素包装在<tr>中。然后开始一个新的<tr>并将“选定的div”放在其中<td>。它将启动一个新的表格行，并显示在现有标记下方。