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