css - CSS：コンテンツ領域の横に画像が表示されます（左と右）

Question

私は現在、画像と背景のcss位置で作業しています。コンテンツ領域の横（左/右）に同じ画像を表示するのに苦労しています。画像の位置がページサイズの影響を受けないようにしようとしています。

同じ画像をコンテンツ領域の横に表示するにはどうすればよいですか？例

これが私が目指していることです。

Answer 1

これが私の刺し傷です。中央に配置された絶対位置のdivを使用して画像を格納し、次に相対位置を使用して画像をいずれかの側の特定のピクセル位置に配置しました。秘訣は、相対ポジショニングを使用しない場合、それらは互いに重なり合うためtop:、画像をシフトして一致させるには、画像の高さに相当するものをそれらの1つに適用する必要があるということです。

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