Dziwna pozycja przyjęta przez div

Question

Mam dziwną sytuację, w której mój środkowy div jest nieznacznie w dół. Oto zrzut ekranu:

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; 
} 

Jestem naprawdę nie jest dobry w CSS, więc to może być mały problem. Po prostu nie mogę tego znaleźć.

Answer 1

Większość przeglądarek dla elementów wykorzystujących display:inline-block automatycznie użyje vertical-align:baseline tego elementu chyba użyć resetu CSS (które prawdopodobnie będą także określić standard de facto jako vertical-align:baseline).

To jest powód do tego, co widzisz każdy z twoich elementów informacyjnych dopasowuje się do linii bazowej. Ponieważ centralny div ma mniejszą wysokość, dostajesz lukę, którą widzisz na górze.

Aby to naprawić:

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

Drugim problemem będzie prawdopodobnie spotkanie to, że teraz jest wyrównany góry, masz „luki” na dole z prawej lub lewej strony bez granic. Albo obramowanie jest zarządzane przez divy o pełnej wysokości, albo wszystkie divy mają taką samą wysokość.

Answer 2

Proponuję dodać float: left do każdego z twoich div. To rozwiązuje twój problem.

example

Answer 3

Można także spróbować

position:absolute; 

DIV wewnątrz pojemnika, a następnie określ

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

Ja zawsze pracuje z absolutnego, nadzieję, że to pomaga.

Answer 4

#info2 
{ 
    vertical-align: top 
} 

powinien załatwić sprawę.