CSS的圖片排列非常靈活,可以實現(xiàn)各種不同的布局。
如果想要讓圖片靠左排列,可以使用CSS中的float屬性。將圖片的float屬性設(shè)為left,可以使其向左浮動,并且其他元素會圍繞它排列。
img { float: left; }
上述代碼會讓所有的圖片靠左排列,如果只想讓某一個特定的圖片靠左,可以給它添加一個class,然后使用該class進(jìn)行樣式設(shè)定。
img.left { float: left; }
以上代碼會把class為left的圖片靠左排列。在HTML中,只需要給該圖片添加一個left的class即可:
需要注意的是,如果頁面中有多個浮動元素,可能會發(fā)生重疊的情況。為了避免這種情況,可以給容器元素添加一個clearfix的類,清除浮動。
.clearfix:after { content: ""; display: block; clear: both; }
在需要清除浮動的容器元素中添加clearfix類即可:
這里是其他內(nèi)容……
以上代碼會讓圖片靠左排列,同時避免了浮動元素重疊的問題。