CSS 问题 - div 之间的间隙答案

【问题标题】：CSS problem - gaps between divsCSS 问题 - div 之间的间隙
【发布时间】：2012-06-04 13:08:50
【问题描述】：

我已经设计了一个布局，我发现 div 相互堆叠时存在一些间隙。

和

【问题讨论】：

【解决方案1】：

你需要这个style.css:

img { display: block }

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

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

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

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

@Alohci 解释得很好。

【讨论】：

【解决方案2】：

在这两种情况下，您都有一个<div class="clear"></div>。我会说该页面的行为符合预期。

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

【讨论】：

【解决方案3】：

在他们的 div .introduction 中，你有一个比 div 本身大的图像，这一定是问题所在，包括其他 div

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您的网站您好：http://uniquedl.com/3closets/about.html 只需将样式设置为

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

然后就可以了

【讨论】：