如何使徽标div留在所有其他div下面？

Question

我的网站有5个由绿色框表示的div。每行应该只有3个div。以下演示显示第5个div（右下角）旁边出现的“Demo”徽标。 CodePen demo

相反，我希望将它置于所有内容之下，例如

徽标位于名为“logospace”的div中

<div id="logospace">
<center><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg"></center>
</div>

现在它的CSS就是：

#logospace{
   margin-top:10%;
}

可能超级简单的修复，但我找不到解决方案。谢谢！

Answer 1

使用clear：

确保徽标清除浮动元素

#logospace{
   clear: both;
   margin-top:10%;
}

CodePen

Answer 2

如果您希望将页面提供给较旧的浏览器，这是一个非常明确的方法。

/*Clear Fix*/
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/* For IE 6/7 only */
.cf {
 *zoom: 1;
}

将此CSS添加到工作表后，div将如下所示。

<div id="logospace cf">
<center><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg"></center>
</div>

Answer 3

通常使用clear:both是最好的选择，但这个技巧也适用。

#logospace{
   margin-top:10%;
   width:100%;
   overflow: hidden;
}