이미지를 플로팅 할 때 위치 상대 수축 포장 컨테이너

Question

학교 프로젝트를 위해 만들 웹 사이트가 있습니다. 나는 HTML과 CSS에 매우 익숙하다. 내 페이지의 다른 섹션에 대한 div 컨테이너를 만들었습니다. 색인 페이지에는 머리글과 바닥 글을 포함한 5 개의 컨테이너가 있습니다.

컨테이너가 움직이는 이미지가있는 위치 1 곳을 제외한 모든 곳에서 작동합니다. 웬일인지, 상자는 3 개의 이미지의 아래에서 shrink-wrapping하고있다. 나는 position : relative를 .container css 규칙에 두는 것으로 생각했다. 그것은 단락과 다른 요소들과 같이 행동 할 것이다. 그 컨테이너가 인덱스 페이지의 다른 상자들과 마찬가지로 사진을 둘러싸고 있습니다. 여기

가 작동하지 않습니다 특정 컨테이너에 대한 HTML입니다 :

<div class="container"> 
     <article> 
      <h2>Meet the Staff:</h2> 
       <div class="gallery"> 
        <figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" /> 
         <figcaption>Mary the Librarian</figcaption> 
        </figure> 
       </div> 
       <div class="gallery"> 
        <figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" /> 
         <figcaption>Ruth the Assistant</figcaption> 
        </figure> 
       </div> 
       <div class="gallery"> 
        <figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" /> 
         <figcaption>Esther the Research Librarian</figcaption> 
        </figure> 
       </div> 
     </article> 
     </div> 

을 그리고 여기에 CSS입니다 :

.container { 
width: 1000px; 
height: auto; 
margin: auto; 
margin-bottom: 25px; 
padding: 0 20px; 
position: relative; 
background: #fff; 
box-shadow: 0 0 10px #b5b2ab; 

}

figure img { 
border: 1px solid #666; 
background-color: #fff; 
padding: 4px; 
box-shadow: 2px 2px 4px rgba(0,0,0,.5); 

}

figcaption { 
font: Arial, sans-serif; 
text-align: center; 
margin: 10px 0 0 0; 

http://www.ta5zc.com/

감사를 당신이 제공 할 수있는 모든 도움 :

}

figure { 
display: block; 
float: left; 
width: 240px; 
margin: 0 25px 25px 25px; 

} 여기

은 그래서 당신이 무슨 일이 일어나고 있는지 볼 수 있습니다. 나는 틀린 것을 알아낼 수 없다.

Answer 1

당황 스럽지만, 알아 냈습니다. 컨테이너는 예상대로 작동합니다. 이미지 아래에 요소가 없어서 아무 것도 머물러 있지 않았습니다. 따라서 이미지를 떠올리게했을 때 상자는 예상했던 것처럼 페이지 위로 이동했습니다. 내가 말했듯이, 나는 이것에 처음이다 ;-)