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;
}

如何在我的情况下定位我的链接？

1 个答案: