CSS：图像显示在内容区域旁边（左右）

Question

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

如何在内容区域旁边显示相同的图片？ EXAMPLE

这就是我的目标：

Answer 1

这是my stab at it。我使用位于中心的绝对定位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