Question

我正在制作一个网页，其中两面各有2张图像，侧面为宽度为190px，高度为700px的侧壁。我想要修复两个图像而不滚动。我已经将样式定位为两个图像的位置，然后1个图像消失，右侧图像到达左端。可以解决这个问题，任何人都可以帮助。程序代码如下：

HTML

    <div id="left-ad">
        <div id="sidebar">
        <a href="#" ><img src="sidewall.png" alt="Call UAE offline Business Directory" style="border-width: 0px"></a>
        </div>
    </div>

    <div class="right-ad" >
        <a href="#" ><img src="wad.jpg" alt="Call UAE" style="border-width: 0px" ></a>
    </div>
    <div class=wrapper>
        //center body part
    </div>

CSS

#left-ad{
float:left;       
position: fixed;
}

.right-ad{
float:right;
position: fixed;     
}

Answer 1

使用绝对位置将它们放在右侧。滚动时它们会留在那里。

  .right-ad{
        position: absolute;
        right: 0;
        top: 150px; //change this to how far you want it down the page
    }

Answer 2

Float不适用于位置固定元素。你可以使用左和正确属性来实现这一目标

#left-ad{
  left:0;       
  position: fixed;
}

.right-ad{
  right:0;
  position: fixed;     
}

如何在不滚动的情况下修复横幅图像

2 个答案: