使用float (right)使得另一邊(left)的內容自動依對邊(right)內容長度而調整

特別銘謝：Rei指導

以下方法Firefox 測試OK

<style type="text/css">
#A { float: right; } /* 右邊那塊 */
#B { width: auto; } /* 左邊那塊，裡面不能有clear:both;，其中的float全改為display:inline-block; */
/* 這樣左邊那塊內容會自動依右邊那塊長度而換行 */
</style>
<div>
<div id="A">This is A</div>
<div id="B">test test test test test test ...</div>
</div>

在float:left; 改 display: inline-block;後，tag之間的換行會變成空白
因為IE7不吃inline-block，所以還是照舊的方法，固定寬度比較好。
老天尊: 我發現改display:inline-block, 當初換行的縮排換變多一個空白 @_@
Rei: 對啊
Rei: inline-block的話
Rei: 標籤跟標籤中間不能空格或換行
老天尊: 冏rz
Rei: <div class="a">a</div>
<div class="b">b</div>
Rei: 這樣中間會空格
Rei: 但是
<div class="a">a</div><div
class="b">b</div>
這樣不會
Rei: 所以我都會寫成
<div
    class="a">a</div><div
    class="b">b</div>
老天尊: 其實可以換行... 你塞註解進去
<div class="a">a</div><!--
 --><div class="b">b</div>
老天尊: 喔喔 酷!
Rei: 嗯 那也是一個方式

使用樣板語言時，前後都要加註解
[if xxx]
     <div>A</div><!--
-->[endif]<!--
--><div>B</div>
OR
<div>A</div><!--
 -->[if xxx]<!--
   --><div>
        B
      </div>
    [endif]