製作一個鏈接和它上面的圖片有相同的寬度

好，所以今天我的大腦壞了我無法想象這個基本問題了。我想要在圖像下面放置一個LINK。這些圖像可以有不同的寬度，讓我們說一些是100像素寬，有些是200像素寬：製作一個鏈接和它上面的圖片有相同的寬度

<div>  
    <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;"> 
    <a href="link.php" style="display: inline-block;background-color:blue">WORDS</a> 
</div>

如果我設置鏈接的顯示內聯塊，只佔用它需要說「話」的空間。如果我將它設置爲阻擋，div伸展以適應它，它佔用可用空間的100％，並且是5倍太寬，比圖像寬得多。

我想要鏈接佔用div的整個寬度，我希望div與圖像（加上填充）一樣寬。

如果我設置div的寬度像素，如果圖像是不同的寬度，它看起來不正確。我在這裏錯過了什麼？

來源

2015-12-04 pg.

你想有'div'寬度相同？ – www139

的鏈接，對不起，我會編輯。 –

爲什麼不把圖像放入鏈接？不受歡迎的行爲？ – sasha

設置鏈接樣式display:block;，也許給你的形象width="100%"

來源

2015-12-04 00:18:14

OP要鏈接的是全寬，而不是圖片... – patrick

這不會給OP找到的結果。 – Matthew

這是你想要的嗎？讓我知道如果我能改善這個答案:)

<div> 
 
    <img src="image.jpg" style="auto;text-align:center;display:block;padding:1em;border: 5px solid #EFEFEF;"> 
 
    <a href="/link.php" style="display: block;background-color:blue; width:calc(100% - 10px); margin:auto;">WORDS</a> 
 
</div>

來源

2015-12-04 00:21:52 www139

父DIV會自動設置爲display: block將跨越整個頁面的長度。如果您將父div設置爲display: inline-block，div將只與圖像一樣寬。然後，您將鏈接設置爲width: 100%，這應該會爲您提供您正在查找的結果。

這裏是一個Fiddle爲你看看我的意思。

我已經更新了小提琴，包括2個不同大小的圖像。關鍵是你必須包裝每個圖像和鏈接在一個新的父div。

希望這會有所幫助！

編輯：如果你想添加一個圖像和填充鏈接之間的空間只給你的圖像的頂部/底部填充像這樣padding: 1em 0;然後添加側填充像父親的div如此padding: 0 1em。

這是另一個Fiddle與這implimented。

來源

2015-12-04 00:24:40 Matthew

我想U向這樣的事情...

<div style="width:100%; max-width:400px;"> 
 
    <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="auto;text-align:center;display:block; max-width:400px; width:100%; padding:1em;border: 5px solid #EFEFEF;"> 
 
    <a href="link.php" style="display: inline-block; background: blue; width: 100%; padding:0em 1em;border: 5px solid blue;">WORDS</a> 
 
</div>

以及你看到我已經與所有元素的寬度起到去實現它，而被騙的「a」標籤的邊框填充。沒有設置您的圖像和主div的寬度，你不能實現你問，除非你使用JavaScript ...

來源

2015-12-04 01:03:57 Vinc

我不同意@Vinc你看過我的回答嗎？ – Matthew

製作一個鏈接和它上面的圖片有相同的寬度

回答

相關問題