HTML DIV設置

Question

我試圖做到這一點：

|-----|----------------| 
| O | OOO   | 
| O |    | 
| 50px|  300px  | 
| O |    | 
| O |    | 
| O |    | 
|-----|----------------| 

甲分裂（總寬度：350像素）劃分成2（寬度：50像素& 300像素），則第二分割完整圖像50widthx50height。

O代表50x50的圖像。

它似乎有效，但由於某種原因圖像重疊了50％左右。我該如何做到這一點？

HTML

<div id="container"> 
    <div id="left"> 
    </div> 
    <div id="right"> 
     <div id="right-container"> 
      <div class="object"> 
       <img src="img/tiles/wood.png"> 
      </div> 
      <div class="object"> 
       <img src="img/tiles/wood.png"> 
      </div> 
      <div class="object"> 
       <img src="img/tiles/wood.png"> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#container { 
position: absolute; 
top: 0px; 
right: 0px; 
width: 400px; 
height: 400px; 
} 
#left { 
position: relative; 
float: left; 
width: 100px; 
height: 100%; 
background-color: rgba(255,0,0,0.8); 
} 
#right { 
position: relative; 
width:300px; 
height: 100%; 
float: right; 
background-color: rgba(0,0,255,0.8); 
} 
#right-container { 
position: relative; 
float: left; 
width: 50px; 
height: 50px; 
} 
.object { 
width: 50px; 
height: 50px; 
} 

Answer 1

最重要的變化是定義一個寬度圖像 - 看到我的示例中的最後CSS規則。除此之外，我掏出了很多不必要的東西。

#container { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
#left { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100%; 
 
    background-color: rgba(255, 0, 0, 0.8); 
 
} 
 

 
#right { 
 
    width: 300px; 
 
    height: 100%; 
 
    float: right; 
 
    background-color: rgba(0, 0, 255, 0.8); 
 
} 
 

 
#right-container {} 
 

 
.object { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.object img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div id="container"> 
 
    <div id="left"> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="right-container"> 
 
     <div class="object"> 
 
     <img src="http://placehold.it/200x200/6bf"> 
 
     </div> 
 
     <div class="object"> 
 
     <img src="http://placehold.it/200x200/bf6"> 
 
     </div> 
 
     <div class="object"> 
 
     <img src="http://placehold.it/200x200/fc3"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>