css - CSS：图像出现在内容区域旁边（左和右）

Question

我目前正在处理图像和背景 css 位置。我一直在努力让相同的图像出现在内容区域的旁边（左/右）。我试图让图像位置不受 pagee re size 的影响。

我怎样才能让相同的图片出现在内容区域旁边？例子

这就是我的目标：

Answer 1

这是我的尝试。我使用了一个位于中心的绝对定位的 div 来包含图像，然后使用相对位置将它们定位到任一侧的特定像素位置。诀窍是，如果您不使用相对定位，它们会彼此重叠，因此您必须将top:与图像高度相等的值应用于其中一个以使其移动以匹配。

HTML：

    <div id="image_container">
        <div id="img_r" class="outside_image">
            <img />
        </div>
        <div id="img_l" class="outside_image">
            <img />
        </div>  
    </div>

CSS：

#image_container{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0px;
  z-index: 900; /* not really required */
}

.outside_image img{
  width: 200px;
  height: 200px;
}
.outside_image {
    position: relative;
}
#img_r{
  float: right;
  right: -725px;
  top: 200px;
}
#img_l{
  float: left;
  left: -725px;
}

Answer 2

您可以在#left2 上使用负边距：

#left2 {    
    float: left;    
    width: 200px;    
    background: #DDD;    
    -moz-border-radius: 10px;    
    border-radius: 10px;    
    margin-right: 15px;   
    padding: 5px;    
    margin-left: -248px;    
}

如果您需要它保持在同一个位置（即使您调整页面大小），您可以使用绝对位置：

#left2 {   
    position: absolute;    
    left: 20px;   
    top: 160px;   
}

我使用 Chrome 开发者工具来尝试这些东西。这是带有我的代码的页面截图：http: //d.pr/i/wXQ2