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

给 .thumbContainer 一个与缩略图图像宽度相等的宽度。

还要给 .thumbContainer text-align:center

于 2012-07-16T11:39:26.107 回答
0

尝试将此设置为您的描述类..

position: relative;

并将“溢出：隐藏或自动”设置为您的 thumbContainer 类！

如果这不起作用....您可以尝试给出 min-width 或 margin:0 auto; 去你的一门课……继续！

于 2012-07-16T11:43:14.070 回答