如果你想讓文字浮動到圖片的上方,你可以使用CSS來輕松實現這一效果。
img { float: left; margin-right: 20px; } p { margin-top: 0; /* 使用負margin-top和行高可以將文本拉到圖片的上方 */ margin-top: -10px; line-height: 1.5; }
如上代碼所示,我們首先利用CSS的float屬性將圖片左浮,再設置一些margin使文本居中,最后使用負margin-top和行高來將文本拉到圖片上方。這樣就可以很輕松地讓文字浮動到圖片上方了。
如果您需要在圖片上方加上標題,您可以像下面這樣實現它:
.image-with-text { position: relative; margin-bottom: 20px; } .image-with-text img { float: left; margin-right: 20px; } .image-with-text h2 { position: absolute; top: 0; left: 0; }你的標題
你的文本
在這個例子中,我們使用了position屬性來讓標題絕對定位在圖片的上方。同樣,您可以使用CSS的float屬性和margin來讓文本居中,并利用position屬性來讓標題浮在圖片之上。
總之,使用CSS浮動和絕對定位可以很容易地實現文本浮動到圖片上方的效果。
上一篇mysql截取字符串前后
下一篇css文字淡入淡出