超鏈接插入DIV

Question

在HTML： 我怎麼能做出不同的圖片，裏面<div>

其各自的超鏈接在一起，我想避免許多<div>條目爲每個圖像。

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div> 

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div> 

<div class="image_" data-no-elementresizer><a href="http://....." target="_self">img.jpg</a></div> 

Answer 1

這是你要找的東西嗎？

.gallery { 
 
    width: 820px; 
 
    background-color: blue; 
 
    height: 800px; 
 
} 
 
.gallery img { 
 
    float: left; 
 
    vertical-align: top; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<div class="gallery"> 
 
    <img src="http://lorempixel.com/200/200" /> 
 
    <img src="http://lorempixel.com/200/200/people/2" /> 
 
    <img src="http://lorempixel.com/200/200/city/3" /> 
 
    <img src="http://lorempixel.com/200/200/city/2" /> 
 
    <img src="http://lorempixel.com/200/200" /> 
 
    <img src="http://lorempixel.com/200/200" /> 
 
    <img src="http://lorempixel.com/200/200/people" /> 
 
    <img src="http://lorempixel.com/200/200/sports/2" /> 
 
    <img src="http://lorempixel.com/200/200/city" /> 
 
    <img src="http://lorempixel.com/200/200/sports" /> 
 
</div>

Answer 2

這可能會遲到，但在這裏我的答案與圖片和超鏈接。

div.image { 
    margin: 5px; 
    border: 1px solid #ccc; 
    float: left; 
    width: 180px; 
} 

div.image :hover { 
    border: 1px solid #777; 
} 

div.image img{ 
    width: 100%; 
    height: auto; 
} 


<div class="image"> 
    <a target="_self" href="Url"> 
    <img src="ImageUrl" width="300" height="200"> 
    </a> 
    <a target="_self" href="Url"> 
    <img src="ImageUrl" width="300" height="200"> 
    </a> <a target="_self" href="Url"> 
    <img src="ImageUrl" width="300" height="200"> 
    </a> 
</div>