div로 찍힌 이상한 위치

Question

나는 이상한 상황이있다. 내 중간은 div이 약간 아래쪽에있다. 여기 스크린 샷입니다 :

HTML :

<div id="footer"> 
    <div class="content"> 
     <div id="info1"> 
      <img src="img/temp.png" alt="About me" /> 
      <h4>About Me</h4> 
      <p>this is about me section</br>and this is the other line</br>and this is a third line</p> 
     </div> 
     <div id="info2">            
      <h4>Random Photos</h4> 
      <div id="randomPhotos"></div> 
     </div> 
     <div id="info3"> 
      <h3>Follow Me</h3> 
      <div> 
      <img src="img/temp.png" alt="facebook" /><a href="#">Facebook</a> 
      </div> 
      <div> 
      <img src="img/temp.png" alt="twitter" /><a href="#">Twitter</a> 
      </div> 
      <div> 
      <img src="img/temp.png" alt="email" /><a href="#">E-mail</a> 
      </div>    
     </div> 
    </div> 
</div> 

CSS :

#info1, #info2, #info3 
{  
    padding: 10px; 
    display:inline-block; 
} 

#info1 
{ 
    width:20%; 
} 

#info1 img 
{ 
    margin-right:3px; 
    width:20px; 
    height:20px; 
    background-image:url('../img/glyphicons-halflings.png'); 
    background-repeat:no-repeat; 
    background-position:-162px 1px; 
} 

#info1 img, #info1 h4 
{ 
    display:inline-block; 
} 

#info2 
{ 
    width:55%; 
    border-left:1px solid gray; 
    border-right : 1px solid gray; 
} 
#info3 
{ 
    width:15%; 
} 

#info3 img 
{ 
    width:20px; 
    height:20px; 
    margin-right:5px; 
} 

#info3 img[alt="facebook"] 
{ 
    background : url('../img/result.png') no-repeat 0px -30px;  
} 

#info3 img[alt="twitter"] 
{ 
    background : url('../img/result.png') no-repeat 0px -60px; 
} 

#info3 img[alt="email"] 
{ 
    background : url('../img/result.png') no-repeat 0px 0px; 
} 

#info2 div 
{ 
    padding:3px; 

} 

#randomPhotos 
{ 
    height : 100px; 
} 

내가 CSS에서 정말로 좋은거야, 그래서 어쩌면 작은 문제. 나는 그것을 발견 할 수 없다.

Answer 1

대부분의 브라우저, 이것은 당신이 무엇을보고하는 이유는 당신이 CSS 리셋을 사용하지 않으면 자동으로 해당 요소에 vertical-align:baseline를 사용 display:inline-block를 사용하여 요소 (즉, 아마도 vertical-align:baseline로 사실상의 표준을 정의합니다.)

에 대한 , 귀하의 정보 divs의 각각은 기준선에 정렬됩니다. 중심 div가 더 작은 현명한 높이이기 때문에 당신은 당신이 정상에보고있는 간격을 얻는다.

그것을 해결하려면 : 발생할 아마 것

#info1, #info2, #info3 
{  
    padding: 10px; 
    display:inline-block; 
    vertical-align:top; 
} 

두 번째 문제는 지금이 정렬 맨, 당신은 더 왼쪽 또는 오른쪽 테두리 하단에 '차이'를 가지고있다. 테두리를 전체 높이 div로 관리하도록하거나 모든 div를 동일한 높이로 만듭니다.

Answer 2

각 div에 float: left을 추가하는 것이 좋습니다. 이렇게하면 문제가 해결됩니다.

example

Answer 3

또한

position:absolute; 

에 컨테이너 내부의 div를 시도하고 난 항상 절대 함께 일하고

top:0px; 
left: (left div with)px; 

지정이 도움이되기를 바랍니다 수 있습니다.

Answer 4

#info2 
{ 
    vertical-align: top 
} 

트릭을해야합니다.