图片链接导致另一个图片链接不可点击

我有两个图片链接，需要以一点点偏移为中心。我的问题是，一个链接导致另一个不可点击。图片链接导致另一个图片链接不可点击

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

来源

2013-08-30 crazybob

使用元素检查器了解发生了什么。 –

为什么要为.my_class写两次相同的规则？此外，您还有一个额外的逗号：'margin：0px，auto;' – fcalderan

链接的div的只是彼此的顶部。所以鼠标不会“看到底部的链接”。尝试在具有定义宽度的div中使用display inline。

来源

2013-08-30 08:48:59 Boranas

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

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

来源

2013-08-30 08:50:10

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

我用浮球做了小提琴的更新。

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

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

的包装，需要使用一个clearfix或东西被清除。

来源

2013-08-30 08:51:10 chris

尽量不要使用负面定位，这是不好的做法，并会导致这样的问题。尝试定义包含分隔的大小，然后将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; 
}

来源

2013-08-30 08:54:47 user5623896726

下面是修改代码：

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

来源

2013-08-30 09:01:26

图片链接导致另一个图片链接不可点击

回答

相关问题