html - Margin-Top 不适用于 div 元素

Question

所以我正在尝试一个简单的布局。它基本上是一个带有很多图片的采访布局。

这是我遵循的基本概念：

-介绍

-相片

-面试

我在顶部设置了一个边距，<div id="interview">但它不起作用。为什么？我认为我的布局结构存在问题。（如果您单击 chrome 中的检查元素）

如何解决？链接： http: //mysecretathens.gr/kulte_test/osterman.html

Answer 1

这是因为你没有清除浮动元素，只是在你<div id="interview">这样声明之前清除浮动而不是使用margin-top: /* Whatever px */

<div style="clear: both;"></div>
<div id="interview"> 

看看你的网站，你在登陆页面上使用了大量的图片，这会惹恼任何带宽不足的用户，我建议你看看lazy loading

Answer 2

解决此问题的一种干净方法是将“溢出：隐藏”添加到照片元素。

#photos {overflow:hidden;}

Answer 3

它“不起作用”，因为上面的所有图像都是浮动的——因此不会跨越其父元素的高度。

添加overflow:hidden到您的#photosdiv 中，使其包含所有图像并且不会让它们浮出 - 然后以下元素上的 margin-top 将按预期工作。