Question

方案

我的网站上有一个横幅，宽度为2000像素，当我放大时，整个横幅都贴在该页面的左侧。

问题

我希望它保持原样，如果用户放大太多，它将离开页面。与this sites banner

相同

示例

横幅中的图像为2000像素，图像的主要部分位于中心，宽度为1000像素。如果放大，图像会移动，图像的中心会向右移动。

以下是我的实时代码：Site Example

这是我的CSS：

    #slideshow { 
    margin: 0 auto; 
    position: relative; 
    left:0px;
    width: 2000px; 
    height: 400px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    display:block;
    text-align:center;
    float: none;
}
#slideshow img {
   margin: 0 auto;
   text-align:center; 
}
#slideshow > div { 
    position: absolute; 
}
#banner {
    background: #EAEAEA;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    width: 100%;
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    top: 180px;
}

这是我的HTML：

 <div id="banner">
    <div id="slideshow">
      <div><a href="#"><img src="AG/images/bulbs.png"></a></div>
      <div><img src="AG/images/cables.png"></div>
   </div>
</div>

我还在学习，所以我感谢你的帮助：D

Answer 1

使位置相对，并在您想要移动横幅的方向上添加一些填充。

如何在放大CSS HTML时阻止DIV粘在页面左侧

1 个答案: