Question

我有以下div布局：

当我在蓝色和橙色div中放入普通的txt元素时，一切都很好。但是，当我将图像放在橙色div（31px）中时，蓝色div中的元素被推下蓝色div高度的一半左右。

（另外的信息，当悬停在firebug中的橙色div的html上时，似乎只有一半的图像包含在其中，即使肉眼看起来很好）。

感谢任何帮助，我对盒子模型仍然有点生疏。感谢。

Answer 1

尝试浮动两个内部div。

浮动：左;

Answer 2

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

<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提供一些填充和/或图像边距来调整布局，您应该能够准确地获得您想要的外观。祝好运！

Answer 3

我对CSS盒子不太满意，但可以添加：display：inline;图像样式修复了问题？和/或添加保证金：0px;
哦，并且是Quirks模式中的brwoser渲染，因为不在Quirks模式下渲染它也可以解决一些问题。

修改的
通过怪癖模式我的意思是，你的页面是否有类似下面的DOCTYPE声明（尽管你应该使用相关的DOCTYPE）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

更多关于DOCTYPES的信息：http://htmlhelp.com/tools/validator/doctype.html

图像导致垂直对齐问题

3 个答案: