對齊兩個不同側面的div

Question

我是CSS和HTML的新手，我的問題非常簡單！

我的頁面中有三個<div>標簽，如下所示：

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

我想像這樣展示我的div：

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

我想在右側移動第三個並與第二個對齊以便在同一條線上！

我該怎么做？

Answer 1

使用float和clear屬性的組合：

<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>

http://jsfiddle.net/8d7tD/

Answer 2

這是另一種可能性（有很多方法可以做到 - 不確定是否有一個確定的“最佳方式”，它真的取決於頁面的其余部分）。

根據評論更新：

HTML

<div id="container">
    <div id="first">foo</div>
    <div id="second">foo</div>
    <div id="third">foo sadsad asdasdasd asdasdasa</div>
</div>

CSS

/*just for display purposes*/
 #first, #second, #third {
    border: 1px solid black;
    width:100px;
}
#container {
    position: relative;
    width: 210px;
}
#first {
    height:100px;
}
#third {
    position: absolute;
    right: 0;
    bottom: 0;
}

這是一個演示： jsfiddle

應該注意的是，你可能需要一個clear:both在使用它之后的某個地方。