链接不工作浮动div内 [英] Link not working inside floated div

问题描述

与类ad_leftdiv中的链接将无法正常工作，我不明白为什么。我在3种不同的浏览器上试过，行为是一样的。我很困惑。

 < style> 
 #ad_content .ad_left {
 float：left; 
 margin-right：12px; 
职位：亲属; 
} 
 #ad_content .ad_right {
 position：relative; 
} 
 #ad_content .ad_expand {
 position：absolute; 
 right：0; 
 bottom：0; 
} 
< / style> 
< div id =ad_content> 
< div class =ad_row> 
< div class =ad_left> 
< a href =＃>< img src =images / ad_frleft.jpg/>< / a> 
< a href =＃>< img class =ad_expandsrc =images / expand.png/>< / a> 
< / div> 
< div class =ad_right> 
< a href =＃>< img src =images / ad_frright.jpg/>< / a> 
< a href =＃>< img class =ad_expandsrc =images / expand.png/>< / a> 
< / div> 
< / div><！ -  End Ad Row＃1  - > 
< / div><！ - 最终内容 - > 
  

解决方案

问题在于。 ad_right 的宽度为100％（块元素的默认值），并覆盖 .ad_left 。如果您将背景设置为 .ad_right ，您会看到它更好。

解决方案是float .ad_right ：

  .ad_right {
 float：right; 
} 
  

还有一个小技巧 .ad_right 自动填充 左侧浮动的elemenet左侧的空间，您可能更喜欢使用它。如果是这样，不要浮动 .ad_right ，只需设置一个溢出：

  .ad_right {
 overflow：hidden; 
} 
  

另一种方法是从<$ c $删除相对位置C> .ad_right 即可。但不知道你是否需要它。

The links in the div with Class "ad_left" won't work and I can't figure out why. I tried it on 3 different browsers and the behavior is the same. I'm baffled.

<style>
#ad_content .ad_left{
float: left;
margin-right: 12px;
position: relative;
}
#ad_content .ad_right{
position: relative;
}
#ad_content .ad_expand {
position: absolute;
right: 0;
bottom: 0;
}
</style>
<div id="ad_content">
    <div class="ad_row">
        <div class="ad_left">
            <a href="#"><img src="images/ad_frleft.jpg" /></a>
            <a href="#"><img class="ad_expand" src="images/expand.png" /></a>
        </div>
        <div class="ad_right">
            <a href="#"><img src="images/ad_frright.jpg" /></a>
            <a href="#"><img class="ad_expand" src="images/expand.png" /></a>
        </div>
    </div><!-- End Ad Row #1 -->
</div><!-- End Content -->

解决方案

The problem is that .ad_right has a width of 100% (default value for block elements) and is covering your .ad_left. If you set a background to .ad_right you will see it better.

The solution is float .ad_right:

.ad_right {
  float: right;
}

There's also a little trick that .ad_right fills automagically the space left to the right from your left floated elemenet, which maybe you prefer to use. If so, don't float .ad_right and just set an overflow on it:

.ad_right {
  overflow: hidden;
}

Another way is just delete the relative position from .ad_right. But not sure if you need it there or not.

这篇关于链接不工作浮动div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！