类为“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 -->
最佳答案
问题是 .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
中删除相对位置。但不确定您是否需要它。
关于html - 链接在 float div 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16382431/