靠邊區塊製作法

新垣結衣：2001年，身為女子中小學生流行雜誌『ニコラ』的讀者的姊姊,說了「我不能參加了,所以你代我去參加」,結果在『ニコラ』模特兒應募中，獲得最優秀獎。

有些時候，需要在文章中使用輔助圖片，並放置在該段文章的左側或右側，雖然可以靠img標籤的align屬性來達成。但如果想要如右邊一樣，在靠邊的圖片下加註文字，那該怎麼做呢?

<div style="width:131px;float:right;margin:5px"><img src="圖片網址" width="131" height="87"/> 新垣结衣......</div>

解說：

得在該段文字的前面置入這張圖片與文字，並且將圖片與文字包覆在DIV標籤中，我們就可以使用CSS的float屬性把整個DIV物件置於整個HTML排版的右邊（float:right）或左邊（float:left），其下面的內容就會去遞補DIV標籤所空下來的區塊。

這邊要注意的是，使用float時，寬度（width）與高度（height）的設定很重要，以上面例子而言，為了不讓照片加註文字超過照片寬度，把DIV的寬度設的跟圖片一樣寬。而為了不讓DIV區塊與其他段落區塊的文字混雜在一起，範例中也設了margin屬性來區隔出與段落文字間的邊界距離。

與表格排版之間的差異性：

這樣的排版方法，與用表格（table）創造出來的排版方法的差異是：除了原始碼簡單明瞭以外，另一個好處就是這樣的排版具備了彈性的配置。可以應付任何寬度的螢幕來閱覽。您可以任意拖動網頁視窗的寬度。體驗一下這樣的排版所帶來的彈性配置。