CSS问题 - div之间的差距

Question

我设计了一个布局，我发现div的堆叠之间存在一些差距。

可以帮助我http://uniquedl.com/3closets/about.html

和

Answer 1

您需要style.css：

img { display: block }

您需要将.introduction .intro-message的高度更改为384px，以匹配左侧图片的高度。

这样做可以解决这两个问题。

---

作为img { display: block }的替代方案，您可以改为：img { vertical-align:bottom }。这也解决了。

See this answer可以很好地解释这里发生的事情。

@Alohci很好地解释了它。

Answer 2

在这两个实例中都有<div class="clear"></div>。我会说该页面的行为符合预期。

修改：如果您使用Google Chrome查看此页面，则可以右键单击某个区域并选择“检查元素”。它将提供一个窗口，用于显示浏览器呈现的代码，右侧将显示另一个属性窗口，显示分配给您正在查看的元素的css。

Answer 3

在他们的div。介绍中你有一个比div本身更大的图像，这一定是问题，包括其他div

Answer 4

第一个差距：你的班级。introduction的高度为384px，其他班级.intro-message（.introduction的孩子）的高度为390px 。

Answer 5

您好，您的网站：http：//uniquedl.com/3closets/about.html只需制作风格

.introduction {
    height: 384px;
    overflow: hidden;
    position: relative;
}

然后它会起作用