大笨鳥的私房菜

本篇文章內含當文字與 TAG 同時存在於另一 TAG 之內時，當內部的 TAG 使用 float 屬性靠右時，會發生斷行問題的解決方式。
 
有時為了排版，我們希望將兩段文字分別置於某個區塊內的左、右兩邊。
傳統上我們會使用 Table 來進行此種需求的排版，但有時使用 Table 又不是那麼方便且又讓 html code 變得肥大，此時我們可以使用 CSS 的 float 屬性來進行排版。以下為範例
 
    <div style=''background-color:#F6E7D6;">
        我要置左
        <div style=''float: right">我要置右</div>
    </div>
 
呈現效果：


但此時我們會發現「我要置右」的文字雖然已經靠右了，但是卻掉在「我要置左」文字的下一行。

 要解決這個問題不難，只要將 tag 置於文字之前就行了。範例：
 
    <div style=''background-color:#F6E7D6;">
        <div style=''float: right">我要置右</div>
        我要置左
    </div>
 
呈現效果：