在網(wǎng)頁(yè)開(kāi)發(fā)中，我們常常需要在頁(yè)面中添加圖片。有時(shí)候我們希望將圖片置于底部，并且讓文字圍繞圖片。這篇文章將介紹如何使用CSS實(shí)現(xiàn)這一效果。 首先，我們需要將圖片的位置設(shè)置為絕對(duì)定位，這樣它就可以脫離文檔流，并且不會(huì)影響其他元素的布局。我們可以使用下面的CSS代碼將一個(gè)img元素置于底部： pre { background-color: #f4f4f4; padding: 10px; overflow: auto; font-family: Consolas, Monospace; } p { text-align: justify; text-justify: inter-word; font-size: 16px; line-height: 1.6; } img { position: absolute; bottom: 0; } 注意到我們?cè)趇mg選擇器中添加了一個(gè)position: absolute的屬性，這樣我們就能夠通過(guò)bottom: 0的屬性將圖片置于底部。 現(xiàn)在，我們需要讓文字圍繞著圖片。我們可以使用CSS中的float屬性來(lái)實(shí)現(xiàn)這一點(diǎn)。我們可以將圖片的float屬性設(shè)置為left或者right，這樣文字就會(huì)順著圖片的邊緣排列。下面是一個(gè)示例CSS代碼： img { position: absolute; bottom: 0; float: left; } 在這個(gè)示例中，我們將圖片設(shè)置為絕對(duì)定位并置于底部，同時(shí)將它的float屬性設(shè)置為left。這樣就能讓文字圍繞著圖片排列了。 總結(jié)一下，如果你想將一個(gè)圖片置于底部并且讓文字繞著圖片排列，你需要使用下面的CSS代碼： pre { background-color: #f4f4f4; padding: 10px; overflow: auto; font-family: Consolas, Monospace; } p { text-align: justify; text-justify: inter-word; font-size: 16px; line-height: 1.6; } img { position: absolute; bottom: 0; float: left; } 這樣，你就可以輕松地將一張圖片置于底部，并讓文字圍繞著它排列了。