2005年11月14日

[CSS]圖文對齊排列

當圖文並列時,若要讓圖片能夠對齊排列,而不是呈現出梯狀的分佈。
可以使用下列語法:

<img src="http://where.image.is/picture-01.jpg" style="float:left">
文字段落一<br>

<img src="http://where.image.is/picture-02.jpg" style="float:left; clear:left">
文字段落二<br>

重點在於第二個 img 內的 "clear:left"
這個屬性的意思是如果左邊有浮動元件的話,此元件便移到該浮動元件下方

而 "float:left" 則是將所屬元件指定為浮動性質。

下一篇便是應用範例。

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...