Как разместить мои ссылки в моем случае?

Question

Я пытаюсь создать 5 ссылок в своем веб-приложении. Проблема в том, что они должны быть все расположены.

они ссылки на изображения, и они, как:

   ----- 
      |  | 
    ----- |  | 
    |  | ----- 
    |  |    ----- 
    -----    |  | 
    -----    |  | 
    |  |    -----  
    |  |  ----- 
    -----  |  | 
       |  | 
        ----- 



<a href='#'class='link'><img src='btn1.png'/></a> 
<a href='#'class='link'><img src='btn2.png'/></a> 
<a href='#'class='link'><img src='btn3.png'/></a> 
<a href='#'class='link'><img src='btn4.png'/></a> 
<a href='#'class='link'><img src='btn5.png'/></a> 

Мне было интересно, что лучший способ сделать это. Большое спасибо!

Answer 1

самый простой способ с использованием относительного контейнера и абсолютные ссылки, возможно, потребуется адаптивные модификации зависит от Вашего макета

http://jsfiddle.net/venuK/1/

<p>content before</p> 
<div class="absolute-container"> 
    <a href='#'class='link'>img1</a> 
    <a href='#'class='link'>img2</a> 
    <a href='#'class='link'>img3</a> 
    <a href='#'class='link'>img4</a> 
    <a href='#'class='link'>img5</a> 
</div> 
<p>content after</p> 

.absolute-container{ 
    position:relative; 
    width:100%; 
    height:200px; 
} 

.absolute-container a{ 
    position:absolute; 
    display:block; 
    height:60px; 
    width:50px; 
    border:1px dotted red; 
} 

.absolute-container a:nth-child(1){ 
    top:40px; 
    left:0; 
} 

.absolute-container a:nth-child(2){ 
    top:0; 
    left:70px; 
} 

.absolute-container a:nth-child(3){ 
    top:80px; 
    left:160px; 
} 

.absolute-container a:nth-child(4){ 
    top:130px; 
    left:10px; 
} 

.absolute-container a:nth-child(5){ 
    top:150px; 
    left:130px; 
}