라인업 div의 이미지 맨 위로

Question

내 div의 이미지 상단에 텍스트를 정렬하고 싶습니다.

현재 제목 : 웹 세미나, 블로그 등이 사각형의 맨 아래에 있습니다. 나는 거기에 스타일을 가지고 : 수직 정렬 : 상단; 하지만 정사각형 꼭대기에 정렬되어 있지 않습니다.

내 바이올린을 참조하십시오 - http://jsfiddle.net/huskydawgs/e9pZr/ HTML을

<div id="wrapper-resources"> 
     <div id="resources_row"> 
      <div class="resources_cell1"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Webinar</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell2"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Article</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell3"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Blog</strong></p> 
       </div> 
      </div> 
      <div class="resources_cell4"> 
       <div class="resources_lt"> 
        <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div> 
       <div class="resources_rt"> 
        <p><strong>Market</strong></p> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

#wrapper-resources { 
position:relative; 
width:100%; 
border: none; 
margin: 50px 0 0 0; 

}

#resources_row { 
height:100%; 
white-space:nowrap; 
} 

.resources_cell1, .resources_cell2, .resources_cell3, .resources_cell4 { 
height:100%; 
width:25%; 
display:inline-block; 
white-space:normal; 
} 

.resources_lt { 
height:100%; 
width:33%; 
display:inline-block; 
white-space:normal; 
margin-right: 20px; 
vertical-align: top; 
} 

.resources_rt { 
height:100%; 
width:50%; 
display:inline-block; 
white-space:normal; 
vertical-align: top; 
} 

/* Fonts */ 

#wrapper-resources p { 
color: #666666; 
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif; 
font-size: .9em; 
line-height: 1.6em; 

}

Answer 1

당신은 <p> 기본 margin:1em 0;으로는이 http://jsfiddle.net/e9pZr/3/

자세한 설명은 http://reference.sitepoint.com/css/collapsingmargins를 참조하여 0으로 여백을 다시 설정해야합니다.