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

大多数浏览器，对于使用的元素display:inline-block将自动vertical-align:baseline在该元素上使用，除非您使用 CSS 重置（这也可能将事实上的标准定义为vertical-align:baseline。）

这就是您所看到的原因，您的每个信息 div 都与基线对齐。由于中央div高度较小，因此您会在顶部看到间隙。

要解决这个问题：

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

您可能会遇到的第二个问题是，现在它顶部对齐，底部有一个“间隙”，没有左右边框。要么让边界由全高 div 管理，要么让所有 div 高度相同。

于 2012-12-27T15:11:23.637 回答
1

我建议您添加float: left到每个 div 中。这解决了你的问题。

例子

于 2012-12-27T15:00:31.097 回答
1

你也可以尝试

position:absolute;

容器内的 div 然后指定

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

我一直在与absolute合作，希望它有所帮助。

于 2012-12-27T15:06:51.433 回答
1 
#info2
{
  vertical-align: top
}

应该做的伎俩。

于 2012-12-27T15:11:21.660 回答