Question

div中带有“ad_left”类的链接不起作用，我无法弄清楚原因。我在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％（块元素的默认值）并覆盖了.ad_left。如果您将背景设置为.ad_right，您会看到它更好。

解决方案是float .ad_right：

.ad_right {
  float: right;
}

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

.ad_right { overflow: hidden; }

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

Answer 2

如果没有更多信息，很难说出你的目标是什么。

我确实看到一个问题：通过在img标签上设置position：absolute，您实际上是从锚标签中删除它们。然后锚标签没有内容，因此没有大小。您可以通过在锚标记上设置绝对定位来解决此问题，而不是图像：

<div id="ad_content">
    <div class="ad_row">
        <div class="ad_left">
            <a href="#"><img src="images/ad_frleft.jpg" /></a>
            <a class="ad_expand" href="#"><img src="images/expand.png" /></a>
        </div>
        <div class="ad_right">
            <a href="#"><img src="images/ad_frright.jpg" /></a>
            <a class="ad_expand" href="#"><img src="images/expand.png" /></a>
        </div>
    </div><!-- End Ad Row #1 -->
</div><!-- End Content -->

链接不在浮动div内工作

2 个答案: