0

サムネイル 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そこでは機能しません。

更新 2:

希望の外観をアップロードしました（上部）

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

使ってみました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 に答える
0

<tr>エレメントを使用していますか？そうでない場合は、既存の<td>要素を でラップします<tr>。次に、新しく開始し、<tr>「選択した div」をその中の a<td>に配置します。新しい表の行が開始され、既存のマークアップの下に表示されます。

于 2013-10-16T21:28:41.657 に答える