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のリセットを使用しない限りdisplay:inline-blockを使用して要素のためのほとんどのブラウザは、自動的にその要素にvertical-align:baselineを使用します（それはおそらくvertical-align:baselineとしてデファクトスタンダードを定義します。）

これは、あなたが見ている何の理由ですあなたのinfo divのそれぞれがベースラインに整列しています。中央divは、より低い賢さであるので、あなたはあなたが上に見ているギャップを得る。

それを修正するには：

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

をあなたはおそらく遭遇する第二の問題は、今、それがトップを揃えているということです、あなたは左または右の境界線なしで下部の「ギャップ」を持っています。ボーダーをフルハイトのdivで管理するか、すべてのdivを同じ高さにします。

Answer 2

各divにfloat: leftを追加することをおすすめします。これはあなたの問題を解決します。

example

Answer 3

また、それが役に立てば幸い、私は常に絶対的で働いていた容器の内側のdiv

position:absolute; 

にしようとすると、その後

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

を指定することができます。

Answer 4

#info2 
{ 
    vertical-align: top 
} 

このトリックを行う必要があります。