6

私の真ん中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があまり得意ではないので、小さな問題かもしれません。私はそれを見つけることができません。

4

4 に答える 4

5

ほとんどのブラウザは、CSSリセットを使用しない限り、を使用する要素に対してdisplay:inline-block自動的vertical-align:baselineにその要素を使用します（これにより、デファクトスタンダードも定義される可能性がありますvertical-align:baseline）。

これがあなたが見ているものの理由です、あなたの情報divのそれぞれはベースラインに整列しています。中央のdiv高さが小さいので、上部に見える隙間ができます。

それを修正するには：

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

おそらく遭遇する2番目の問題は、これが上に配置され、左または右の境界線がない下部に「ギャップ」があることです。境界線をフルハイトのdivで管理するか、すべてのdivを同じ高さにします。

于 2012-12-27T15:11:23.637 に答える
1 
#info2
{
  vertical-align: top
}

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

于 2012-12-27T15:11:21.660 に答える
1

あなたもしようとすることができます

position:absolute;

コンテナ内のdivを指定してから指定します

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

私は常にabsoluteで作業しています。お役に立てば幸いです。

于 2012-12-27T15:06:51.433 に答える
1

各 divに追加することをお勧めしますfloat: left。これで問題が解決します。

例

于 2012-12-27T15:00:31.097 に答える