将 div 的位置设置为低于其他没有绝对定位的位置？答案

【问题标题】：Set position of a div below that others without absolute positioning?将 div 的位置设置为低于其他没有绝对定位的位置？
【发布时间】：2014-07-22 23:16:03
【问题描述】：

请访问我的网站查看我的问题：http://amrapps.ir/personal/。

如何在没有绝对定位的情况下将 蓝色 div 低于其他 div（徽标和彩色导航链接）？（浮动：向下）

【问题讨论】：

【解决方案1】：

试试下面的 CSS：

#info {
    width: 100%;
    background-color: blue;
    height: 200px;
    clear: both;
}

由于上面的 div 有一个浮动，蓝色的 div 也只是向上移动。通过使用clear: both; 清除这些浮动，div 将自动向下移动。

除了您的问题之外，这里是 cmets 中说明的保证金问题的解决方案。

要改变蓝色div和导航之间的空间，改变css如下：

#nav {
    float: right;
    margin: 25px 50px 75px;
    background-color: white;
}

如您所见，我使用了定义不同边距的简写方式。您可以按如下方式设置不同的边距：

margin: [top] [right] [bottom] [left];

您未定义的任何边距都将采用相反值的边距。这样你可以看到我设置了上边距为25px，左右边距为50px，下边距为75px。

【讨论】：

谢谢它的工作，但如果我上面没有浮动元素（认为彩色导航链接和徽标是绝对定位的）我该怎么办？
在这种情况下，解决它的唯一方法是在#info 中添加一个 padding-top 或 margin-top。在这种情况下，您还需要确保上面元素的高度保持不变。如果不是这种情况，唯一的解决方案是使用 javascript。
我也可以改变蓝色div和下面的div之间的空间吗？
要更改空间，您需要更改#nav div 的下边距。
在stackoverflow问我的问题之前，我尝试了margin-top，但蓝色的div在顶部，与浏览器顶部的距离会增加！我认为在其他情况下，Javascript 是唯一的方法！