如何在另一个元素下显示一个元素？

Question

我的html文件中的CSS有问题。

我有两个div：

<div class="one">
    ....
</div>
<br>
<div class="two">
    ....
</div>

使用以下css：

.one 
{
    position: relative;
    float: left;
}
.two 
{
    position: relative;
    float: left;
}

问题：第一个div非常大，第二个div应该在第一个div之下，但它不是，它从第一个开始。

如何修复此问题，以便第二个div位于从页面左侧站点开始的第一个div下？

Answer 1

Why clear?

的一个很好的解释

为clear: left

添加.two

.two {
clear: left
}

选中此JSFiddle

Answer 2

.two{ position:relative; clear: left;}

Answer 3

更改

float: left;

要

display: block;

关于花车的信息：

http://alistapart.com/article/css-floats-101

CSS中display属性的信息：

http://www.w3schools.com/cssref/pr_class_display.asp

Answer 4

在第二个div上执行clear:both。这将清除盒子的两侧，因此两侧都不允许浮动元素。

Answer 5

你必须清除第一个div。

Answer 6

如果您想制作菜单，最佳做法是将div包装在父div中：

<div class="parent">
    <div class="one">
        ....
    </div>
    <!-- remove the br -->
    <div class="two">
        ....
    </div>
</div>

使用以下css：

.parent
{
    float: left;
}
.one 
{
...
}
.two 
{
...
}