Question

我检查了few stackoverflow posts和other references，但我无法弄清楚如何将两个div向右浮动，同时将它们垂直叠放在一起（在顶部登录）。

从我的研究中我得出的结论是：

1）Floating使div成为块级元素

2）多个浮动“块”水平在一起

3）Clear: both/right/left/etc允许您指定哪些元素应该包围浮动元素。

以下是我感到困惑的事情：

1）如何在彼此之上或之下制作不同的浮动元素？

这是我的JSfiddle： http://jsfiddle.net/VUSKr/

Answer 1

http://jsfiddle.net/VUSKr/6/

登录并注册两个浮动权利

#login, #register {
    background: white;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float: right;
}

注册清楚

#register{
    clear: right;
}

Answer 2

添加float元素时，还需要清除元素。像下面一样更新你的CSS。

 #login, #register {
background: white;
width: 200px;
height: 120px;
border-radius: 20px;
float:right;
clear:both;
}

DEMO

Answer 3

在#login关闭后在html中添加此内容：

<br style="clear:right;" />

并在你的CSS中：

login, #register {
    background: white;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float:right;/* add this*/   
}

fiddle

看看clearing floats

Answer 4

#login, #register {
  background: none repeat scroll 0 0 white;
  border: 1px solid red;
  border-radius: 20px;
  display: inline-block;
  height: 120px !important;
  vertical-align: top;
  width: 200px;
}

Answer 5

浮动块级元素时，它的行为类似于内联块;这就是为什么你看到他们聚在一起。

最简单的，也是我认为最优雅的问题解决方案是将两个元素放在另一个div中并将其浮动。然后，您不会影响要移动的元素的显示属性。

例如：

.moved {float: right;}

您的小提琴的更新：http://jsfiddle.net/X993j/1/

Answer 6

在两个浮动div之间使用clear:both;或clear:right;（clear属性指定其他浮动元素的哪些边是不允许。）。为你做了一个小提琴：Float two divs to right

浮动2 divs向右？

6 个答案: