Tzeng Yuxio

博觀而約取，厚積而薄發

［CSS］圖文對齊排列

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

1
2
3
4
5

<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” 則是將所屬元件指定為浮動性質。

下一篇便是應用範例。

Comments

Related Posts Plugin for WordPress, Blogger...