Question

我有一个包含三个元素的div。我通过css属性float浮动第一个元素：现在我想将第二个元素向右浮动到第一个元素，第三个向右浮动到第二个元素。

Answer 1

您需要将div元素放置到应用了float:right;属性的父容器中。然后，您可以从各个元素中删除浮动属性，因为它们将按顺序排序，自然地在父div中。

<强> DEMO

HTML：

<div class="parent">
  <div class="div1">First</div>
  <div class="div2">Second</div>
  <div class="div3">Third</div>
</div>

CSS：

.div1, .div2, .div3{
  width:200px;
  height:20px;
  background:#900;
  color:#fff;
  display:inline-block;
  text-align:center;
  padding:10px;
  margin:10px;    
}
.parent{
  float:right;
  margin:auto;
  width:auto;
  height:auto;
  background:#fff;  
}

Answer 2

您可以使用display:inline-block;代替浮点数，并在父容器上使用text-align:right;。像这样：

http://jsfiddle.net/5hFTu/1/

#mycontainer{
 text-align:right;   
    width:100%;
}

#mycontainer div {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-left: 10px;
    background: red;
}

display-inline属性强制元素的行为与图像/文本非常相似，因此您可以使用文本对齐属性来移动它。

Answer 3

你可以将第一个元素浮动到左边，第三个元素浮动到右边，然后第二个元素会落在中间。

#element1 {
    float: left;
}

#element3 {
    float: right;
}

Answer 4

分别添加花车：

.left {
    float: left;
}

.right {
    float: right;
}

Answer 5

更改HTML中元素的顺序。例如，如果你有

<div class="one"> <div class="two"> <div class="three">

使它成为三个二一

并为每个人添加float: right;。

以下是DEMO，您需要的是什么？

Answer 6

浮动右移从右到左定位另一个..你必须改变标记然后做它

或者将它们包含在带浮点数的div中：右

<div id="right">
  <div id="three">
  <div id="two">
  <div id="one">
</div>

#right {
  float: right;
}

#one, 
#two,
three {
  display: inline-block;
}

将一个元素浮动到它的兄弟

6 个答案: