0

画像のサムネイルとその下にあるファイル名を表示するページがあります。現時点で使用しているものは次のとおりです。

HTML :

<a href="#" class="thumbContainer">
    <img class="thumbnail" src="preview4.jpg">
    <br>
    <span class="description">preview4.jpg</span>
</a>

CSS :

.description{
    width: 100%;
    height: 18px;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    color: black;
}.thumbnail{
    display: inline-block;
    border: 2px solid black;
    max-height: 150px;
}.thumbContainer{
    display: inline-block;
    margin-right: 8px;
}

これは、長いファイル名が親コンテナーを拡張してページ レイアウトを台無しにすることを除けば、十分に機能します。短いファイル名を現在のように中央に配置したいのですが、長すぎる名前をクリップして、コンテナー内の画像よりも広くならないようにしたいと思います。画像の幅は不明です。これを機能させる方法はありますか？

4

3 に答える 3

1

これが実際のフィドルです: http://jsfiddle.net/adrz3/1/

CSS:

.thumbContainer{
    display: inline-block;
    margin-right: 8px;
    background:#333;
    max-width:154px;
    text-decoration:none;
}
.thumbnail{
    display:block;
    border: 2px solid black;
    max-height: 150px;

}
.description{
    height: 18px;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    display: block;
    color: #fff;
    padding:5px 0;
}
于 2012-07-16T12:21:27.880 に答える
0

これを記述クラスに設定してみてください..

position: relative;

また、thumbContainer クラスに「overflow:hidden または auto」を設定してください。

これが機能しない場合.... min-width または margin:0 auto; を指定してみてください。あなたのクラスの1つに..続けてください！

于 2012-07-16T11:43:14.070 に答える
0

.thumbContainer に、サムネイル イメージの幅と同じ幅を指定します。

.thumbContainer text-align:center も指定します

于 2012-07-16T11:39:26.107 に答える