圖片鏈接導致另一個圖片鏈接不可點擊

我有兩個圖片鏈接，需要以一點點偏移爲中心。我的問題是，一個鏈接導致另一個不可點擊。圖片鏈接導致另一個圖片鏈接不可點擊

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

圖片鏈接導致另一個圖片鏈接不可點擊

回答

相關問題