Html 对齐位于不同侧的两个div

我不熟悉CSS和HTML，我的问题很简单

我的页面中有三个

标记，如下所示：

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

<div id="first"> foo </div>
<div id= "second"> foo </div>  <div id= "third"> foo </div>

<代码>foo 福 福 我想这样展示我的div：

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

<div id="first"> foo </div>
<div id= "second"> foo </div>  <div id= "third"> foo </div>

foo
福福

我想把第三个移到右边，和第二个对齐，以便在同一条线上

---

如何操作？

结合使用

浮动

和

清除

属性：

<style>
#first, #second, #third { float:left; }
#second { clear:left; }

/* width is not necessary. added for display purposes */
#second, #third { width:50%; } 
</style>

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

#第一，#第二，#第三{float:left；}
#第二个{清除：左；}
/*宽度不是必需的。添加用于显示目的*/
#第二，#第三{宽度：50%；}
福
福
福

---

这里还有另一种可能性（有很多方法可以做到这一点-不确定是否有一个确定的“最佳方法”，这实际上取决于页面的其余部分）

根据评论更新：

HTML 下面是一个演示：

---

需要注意的是，使用此选项后，您可能需要一个

清除：两个
。
像这样？您可以用更少的代码获得相同的结果：
#秒，#三{浮点：左；宽度：50%；}
@j08691右。但是，如果宽度不是
50%
，比如
33%
，该怎么办<代码>浮动
ing&
clear
ing解决了这个问题。op没有指定宽度，我在提供的示例中引入它是为了显示。Hmm。。例如，我想要第二个和第三个div都是box的图像，fist是一些文本。我想对齐，第二个和第三个框始终由水平线对齐，独立于第一个div！看看这个！我想在每一种情况下，从第二个底与第三个底对齐line@prog.Dusan好的，我更新了。这就是你要找的吗？