html - 链接在 float div 中不起作用

Question

类为“ad_left”的 div 中的链接不起作用，我不明白为什么。我在 3 种不同的浏览器上尝试过，行为是一样的。我很困惑。

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

Answer 1

问题是 .ad_right 的宽度为 100%( block 元素的默认值)并且覆盖了您的 .ad_left。如果将背景设置为 .ad_right，您会看得更清楚。

解决方案是 float .ad_right:

.ad_right {
  float: right;
}

还有一个小技巧，.ad_right 自动 填充左侧 float 元素左侧到右侧的空间，您可能更喜欢使用它。如果是这样，不要 float .ad_right 并在其上设置溢出:

.ad_right {
  overflow: hidden;
}

另一种方法是从.ad_right中删除相对位置。但不确定您是否需要它。