在Web開發中，我們常常會遇到需要在文字下方添加圖片的情況。CSS提供了一種簡單的方法來實現這一需求。下面我們來介紹幾種方法。 方法一：使用float屬性 我們可以通過float屬性將圖片浮動到文字下方。下面是一個例子：

p {
width: 500px;
height: 60px;
}
img {
float: left;
margin-right: 10px;
}

在上面的例子中，我們先為p標簽指定了一個寬度和高度，然后通過float屬性將圖片浮動到左側，并且設置了一個右邊距。這樣就可以讓文字在圖片的下方。需要注意的是，如果圖片太寬，可能會導致文字被擠壓到一側，需要根據實際情況調整寬度或者布局。 方法二：使用position屬性 除了float屬性，我們還可以使用position屬性來實現將圖片放在文字下方。下面是一個例子：

p {
position: relative;
width: 500px;
height: 60px;
}
img {
position: absolute;
bottom: 0;
left: 0;
}

在上面的例子中，我們為p標簽指定了相對定位，然后將圖片絕對定位到底部和左側。這樣就可以讓圖片放在文字下方了。需要注意的是，如果p標簽中有多個段落，需要為每個段落都設置position屬性，否則圖片可能會影響其他段落的布局。 方法三：使用display屬性 另外一種方法是使用display屬性。我們可以將圖片設置為block元素，并將其上下外邊距設置為負值，這樣就可以將圖片放在文字下方了。下面是一個例子：

p {
width: 500px;
height: 60px;
}
img {
display: block;
margin-top: -20px;
margin-bottom: -20px;
}

在上面的例子中，我們先將圖片設置為塊級元素，然后將上下外邊距設置為負值。這樣就可以讓圖片放在文字下方了。需要注意的是，如果圖片太高，可能會導致段落高度過小，需要根據實際情況調整外邊距。 總結 以上是三種比較常見的將圖片放在文字下方的方法。具體選擇哪種方法可以根據實際情況和個人喜好來決定。需要注意的是，使用float或者position屬性時需要考慮布局的影響，而使用display屬性時需要注意段落的高度。