CSS中可以利用float屬性將圖片和文字排列在一起,其中可以通過float: left; 或者 float: right; 將圖片分別左對齊或者右對齊。
img { float: right; /* 圖片右對齊 */ margin: 0 0 10px 10px; /* 設置圖片與文字之間的間距 */ } p { text-align: justify; /* 兩端對齊 */ }
在上面的代碼中,我們設置了圖片的float屬性為right表示右對齊,并通過margin屬性設置圖片與文字之間的間距。在p標簽樣式中,我們也可以使用text-align屬性實現兩端對齊的效果。
值得注意的是,在利用float屬性排版時,我們需要為父元素設置overflow屬性,以避免圖片溢出父元素造成奇怪的效果。我們可以通過給父元素設置overflow: hidden; 或者 overflow: auto; 來確保圖片和文字在父元素中完整顯示。
.container { overflow: hidden; /* 避免圖片溢出 */ }
通過以上三部分的CSS代碼,我們就可以簡單實現圖片右對齊的文本排版效果。