如何將圖像浮動到文本右側

這五分鐘的教程解釋瞭如何

您是否有興趣學習如何將圖像浮動到文本的右側？ 如果是這樣，你並不孤單。 在許多情況下，程序員希望網頁上的圖像出現在文本內部，文本流動或環繞它。 幸運的是，操縱圖像與操作文本類似，所以如果你對後者有經驗，這個過程應該不會很難。

事實上，使用CSS浮動屬性，可以很容易地將圖像浮動到文本的右側，並使文本在左側 流動 。 使用這五分鐘的教程來了解如何。

入門

首先，寫一段文字，並在段落的開頭添加一張圖片。 這應該在文本之前但在

標籤之後完成）：

Duis aute irure dolor sed做eiusmod tempor incididunt in rennederit in voluptate。 Cupidatat non proident，ut labore et dolore magna aliqua。 在犯罪行為中堅持練習excepteur sint occaecat。 Mollit anim id est laborum。

接下來，為圖像添加一個樣式屬性並應用float屬性：

style =“float：right;” />

您的文字將直接與圖像碰撞，因此請在圖像上添加一些邊距以便於閱讀：

margin：0 5px 0 0; ”/>

邊緣速記屬性按照頂部，右側，底部和左側（ TRBL ）的順序應用邊距。

包起來

這就是它。 現在你看到將圖像向右移動並不困難。 您可能也有興趣將圖像浮動到左側並將其浮到中心位置。 雖然第一個舉動是可能的，但不幸的是，你不能將圖像浮動到中心，因為這通常需要兩列佈局。