html - 图片导致垂直对齐问题

Question

我有以下 div 布局:

当我将普通的 txt 元素同时放入蓝色和橙色 div 时，一切都很好。但是，当我在橙色 div(31 像素)中放置图像时，蓝色 div 中的元素被向下推大约蓝色 div 高度的一半。

(附加信息，当鼠标悬停在 firebug 中橙色 div 的 html 上时，似乎只有一半图像包含在其中，即使肉眼看起来很好)。

非常感谢任何帮助，我对盒子模型还是有点生疏。谢谢。

Answer 1

您可能想尝试将图像 float 到文本的左侧。这样，文本将位于图像旁边而无需定位。例如:

<style>
div {
position: absolute;
border: 1px solid blue;
}
div img {
height: 31px;
width: 50px;
float: left;
}
</style>

<div>
    <img src="myImage.gif">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

通过给您的容器 div 一些填充和/或图像一个边距来调整布局，您应该能够准确地获得您想要的外观。祝你好运!