0

I have a thumbnails div:

thumbnails

How to place the selected div at the bottom?

Like so:

thumbnails

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

Update:

please look into the jsfiddle-link: http://jsfiddle.net/jJzu5/

vertical-align doesn't work there.

Update2:

uploaded a desired look (at the top)

4

4 回答 4

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/

于 2013-10-16T21:29:57.563 回答
0

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

于 2013-10-16T21:28:41.657 回答
0

你试过使用margin-top吗？我相信这会奏效，如果没有然后尝试添加一些填充。所以文本应该在底部。

在您的小提琴中，问题是带有图像的 div 位于左侧，因此您不能将其放在它的前面。你可以亲自去看看！

由于那里提供的图像很大并且不在一条线上，我给它一个位置：绝对并在那里对齐。另一种方法是保证金。

您正在使用tr，因此 div 将是内联的，即表格行 (tr)。这就是它漂浮在那里的原因。

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

于 2013-10-16T21:26:02.577 回答
0

试试css：

vertical-align: bottom;

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

于 2013-10-16T21:26:06.020 回答