гиперссылок в на 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>