Question

我有两个图像链接需要以一点点移动为中心。我的问题是，一个链接导致另一个链接无法点击。

DEMO - 无法点击正确的

HTML：

<div class="my_class" id="my_id1">
    <a href="URL">
        <img  src="//placehold.it/200x150" />
    </a>
</div>
<div class="my_class" id="my_id2">
    <a href="URL2">
        <img  src="//placehold.it/200x150" />
    </a>
</div>

的CSS：

#my_id1
{
    left: 120px;
}
#my_id2
{
    right: 120px;
    top: -157px;   
}
.my_class
{
  text-align:center;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.my_class
{
  text-align:center;
  position:relative;
  display: block;
  margin: 0px, auto;
}
img{
    border:1px solid red;
}

Answer 1

以下是修改后的代码：

<div class="my_class" id="my_id1"> <a href="URL">
    <img  src="//placehold.it/200x150" />
</a>

</div>
<div class="my_class" id="my_id2"> <a href="URL2">
    <img  src="//placehold.it/200x150" />
</a>

</div>

CSS：

#my_id1 {
  float: left;
  left: 150px;
}
#my_id2 {
  float:right;
  right: 150px;
}
.my_class {
  text-align:center;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.my_class {
  text-align:center;
  position:relative;
  display: block;
  margin: 0px, auto;
}
img {
  border:1px solid red;
}

Answer 2

您需要浮动这些容器：http://jsfiddle.net/GbzSQ/5/ 你的第一个div重叠在另一个上，所以你需要浮动它们然后使用边距来正确定位它们。

.my_class{
    float:left;
    width:200px;
}

Answer 3

链接的div只是彼此重叠。所以鼠标没有＆＃34;看到底部链接＆＃34;。尝试在定义宽度的div中使用显示内联。

Answer 4

我会使用一些浮点数或显示：inline-block的。

我用漂浮物更新了你的小提琴。

http://jsfiddle.net/cfknoop/GbzSQ/7/

#my_id1 {
    float:left;
}
#my_id2 {
     float:right; 
}

需要使用clearfix或其他东西清除包装器。

Answer 5

尽量不要使用负面定位，这是不好的做法，会导致这样的问题。尝试定义包含除法的大小，定位，然后将div放在其中。

我会把一个快速小提示给你看。

http://jsfiddle.net/GbzSQ/23/

这是HTML：

<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
    <img  src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
    <img  src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>

CSS：

.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}

图像链接导致另一个图像链接无法点击

5 个答案: