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...