正確對齊圖像標題

Question

我該如何實現這樣的佈局？

現在，我使用這個HTML：

<div class="image"> 
    <img> 
    <div class="caption"> 
    Caption Text 
    </div> 
</div> 

而這個CSS：

.image { 
    background-color: #2A2A2A; 
} 

img { 
    max-width: 590px; 
} 

但.image箱子太大（因爲它擴展以適應其父母）：

Answer 1

如果您將.image框的寬度設置爲與圖像相同的寬度，則將填充應用於.image框，您將得到您正在查找的邊框，因爲當您指定寬度時，會將填充添加到該邊框。

因此，基本上，你需要下面的CSS：

.image { 
    padding: 10px; 
    width: 300px; /* assuming the picture is 300px */ 
} 

Answer 2

由於div的是塊級元素，他們擴大，以滿足他們的父母。

它可能不是最好的解決辦法，但如果你不知道該圖像的時間提前的大小，你可以做以下：

.image 
{ 
    padding: 10px; 
    max-width: 590px; 
    disply: inline; 
} 

.caption 
{ 
    background-color: #2A2A2A; 
    disply: inline; 
} 

以上將導致IMG的div是呈現爲內聯元素，它將縮小它以適合內容而不是其父級，並且padding將添加邊框。

Answer 3

嘗試以下操作：

.image { 
    position: relative; 
    width: 250px; 
} 
img { 
    border: 15px solid #777777; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    width: 100%; 
} 
.caption { 
    border-left: 15px solid #777777; 
    border-right: 15px solid #777777; 
    border-bottom: 15px solid #777777; 
    position: absolute; 
    width: 100%; 
    bottom: 0px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

<div class="image"> 
    <img src="yourImage" height="150px" /> 
    <div class="caption"> 
     Caption TextCaption TextCaption TextCaption TextCaption Text 
    </div> 
</div> 

現在我已經申請3個邊框標題DIV的原因是因爲你不知道沒有邊界的圖像的寬度，但你知道的寬度圖像邊框。對標題應用相同的邊框將使標題具有相同的寬度。當然，你需要調整.image的寬度和img標籤的高度（這可以通過css來完成），但其餘部分將會爲你完成。此外，標題div將調整大標題的大小。

問候，

理查德

PS驗證碼已審結，在Chrome測試 - 它工作正常。

Answer 4

關鍵是要不是設置爲img元素或父容器的寬度。如果父母.image只是簡單地浮動或以任何其他方式進行調整以使其縮小到其內容的大小，則應該起作用。

我用float來實現收縮包裝的方面，但position: absolute;會做同樣的事情，display: inline-block;。

在JS Bin上有一個演示，它使用一些jQuery來交換圖像，但它對任何元素的寬度沒有影響。這個CSS被複制如下：

.image { 
    float: left; // for the shrink wrap 
    padding: 1em; // To achieve the bordered effect 
    background-color: #666; // just for contrast 
    -moz-border-radius: 2em; // for that web 2.0 goodness... 
    -webkit-border-radius: 2em; 
    border-radius: 2em; 
    } 
    .image img { 
    -moz-border-radius: 2em; // no width, anywhere. Presumably width: auto, would 
    -webkit-border-radius: 2em; // work, but that's redundant, since it's the default 
    border-radius: 2em; 
    } 
    .image img + .caption { 
    width: 100%;    // forcing the .caption to take up 100% of the width 
    background-color: #ffa; // of its parent, except for the padding, so that it's 
    }       // the same width as the image above. 

Answer 5

正如@凱爾說，塊元素調整其寬度，以適應其父母的。 將塊元素設置爲內聯雖然不是正確的方法：您需要做的是將.image div設置爲浮動元素，從而實現類似結果，同時保留塊元素的特徵。這樣的伎倆CSS的應該是：

.image { 
    float: left; 
    display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */ 
    /* whatever code you may find appropriate in order to render the rounded border */ 
} 
.image .caption { 
    clear: left; 
} 

我離開你你會覺得需要進一步改進作風。

Answer 6

我想出了另一種解決方案。我不相信大衛托馬斯的答案會使圖像出現在圖像中（通過一切手段糾正我，如果我錯了），請嘗試下面的代碼（我已經使用了我的代碼和Davids的組合）。

.image { 
    position: relative; 
    float: left; 
    border: 15px solid #777777; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
.caption { 
    position: absolute; 
    bottom: 5px; 
    left: 5px; 
} 
.image-container { 
    position: relative; 
} 

<div class="image"> 
    <img src="/Images/header1.png" /> 
    <div class="caption"> 
     Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text 
    </div> 
</div>