1

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

2 回答 2

1

问题是它.ad_right的宽度为 100%（块元素的默认值）并且覆盖了您的.ad_left. 如果你设置一个背景，.ad_right你会看到它更好。

解决方案是 float .ad_right：

.ad_right {
  float: right;
}

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

.ad_right {
  overflow: hidden;
}

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

于 2013-05-05T07:53:48.923 回答
0

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

我确实看到了一个问题：通过在 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 -->
于 2013-05-05T08:11:05.673 回答