gpt4 book ai didi

css - div采取的奇怪位置

转载 作者:技术小花猫 更新时间:2023-10-29 11:19:02 25 4
gpt4 key购买 nike

我有一个奇怪的情况,我的中间 div 稍微向下。这是一个截图: enter image description here

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,所以这可能是个小问题。我就是找不到。

最佳答案

大多数浏览器,对于使用 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 具有相同的高度。

关于css - div采取的奇怪位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14056640/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com