剪裁元素與其他元素的寬度

Question

我有一個頁面，應該顯示圖像的縮略圖，其文件名在下面。下面是我使用的是什麼的時刻：

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

此作品不夠好，但是使用長文件名，擴展他們的父容器，弄亂了頁面佈局。我希望較短的文件名以現在的方式保持居中，但是名稱太長會被剪切，因此它們不會比容器中的圖像更寬。圖像寬度未知。任何想法，我可以使這項工作？

Answer 1

給.thumbContainer一個等於縮略圖圖像寬度的寬度。

也給.thumbContainer的text-align：中心

Answer 2

試試設置爲你的描述類..

position: relative; 

，還可以設置 '溢出：隱藏或自動' 您thumbContainer類！

如果這沒有工作....你可以嘗試給最小寬度或邊距：0自動;到你的課程之一..開始！

Answer 3

這裏是工作提琴：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; 
} 

希望這會幫助你。