在網頁中,常常需要將一些圖片放置在文本的上方,例如文章的標題圖、商品的主圖等等。一種常用的方法是使用CSS,下面我們來介紹一下如何實現(xiàn)圖片居上的效果。
/*首先需要讓圖片可以和文本共存,即使它們位于同一行也不會出現(xiàn)奇怪的換行*/ img { vertical-align: middle; max-width: 100%; height: auto; } /*接下來,設置圖片的margin-bottom,讓它向上擠壓文本*/ img.top { margin-bottom: -0.2em; } /*最后再設置一些文本的樣式,使其能夠與圖片緊密相連*/ p { font-size: 1.2em; line-height: 1.5em; margin: 0; }
在這里我們使用了vertical-align屬性來使圖片與文本的垂直方向對齊,同時為了防止圖片太大超出了容器的范圍,我們給它設置了max-width: 100%和height: auto,使其自適應容器大小。接著我們通過為圖片添加class屬性,來單獨設置它的margin-bottom,讓它向上擠壓文本。最后,我們再為文本添加一些樣式,使其能夠與圖片緊密相連。
代碼示例:
HTML部分:
<p>這是一段文本,其中包含了一張圖片<img class="top" src="xxx.jpg">,我們可以用CSS來讓它們緊密相連</p>
CSS部分:
img { vertical-align: middle; max-width: 100%; height: auto; } img.top { margin-bottom: -0.2em; } p { font-size: 1.2em; line-height: 1.5em; margin: 0; }
上一篇mysql的中文名
下一篇mysql的中間件是什么