디스플레이 블록은 내가 레이아웃이

Question

작동하지 않습니다 whitch 뭔가 같은 :

<div id="content"> 
     <div class="container"> 
      <div id="container-overlay"></div> 
      <img> 
     </div> 

     <div class="container"> 
      <div id="container-overlay"></div> 
      <img> 
     </div> 
    </div> 

내 모든 이미지는 동일한 폭과 하나의 열에되고 싶어요, 그래서 디스플레이 블록 사용 :

을

#content{ 
    position: relative; 
} 

.container{ 
    display: block; 
} 

.container-overlay{ 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    } 

img{ 
    width: 600px; 
} 

그러나 이미지가 나란히 표시되고 단일 열에 표시되지 않으며 이유가 확실하지 않습니다.

당신이있어 실제 문제를 확인할 수 있습니다 http://layouttotest.tumblr.com/

Answer 1

당신은 단지 .container에 절대 위치를 제거해야,이 바이올린 http://jsfiddle.net/w89qytrs/에서 볼 수 좋아한다. position: absolute은 position: relative 인 다음 상위 요소의 왼쪽 상단 모서리에서 요소를 맞 춥니 다.