2

我有两个图像链接需要稍微移动居中。我的问题是一个链接导致另一个链接不可点击。

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

5 回答 5

3

这是修改后的代码：

<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-30T09:01:26.727 回答
1

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

.my_class{
    float:left;
    width:200px;
}
于 2013-08-30T08:50:10.170 回答
0

尽量不要使用负面定位，这是不好的做法，会导致这样的问题。尝试定义包含分隔符的大小，定位它，然后在其中浮动 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-30T08:54:47.600 回答
0

链接的 div 只是在彼此之上。所以鼠标不会“看到底部链接”。尝试在具有定义宽度的 div 中使用显示内联。

于 2013-08-30T08:48:59.637 回答
0

我会使用一些浮点数或 display:inline-block 。

我更新了你的 Fiddle with the Floats。

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

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

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

于 2013-08-30T08:51:10.667 回答