CSS讓字在圖片右邊

在網頁設計中，使用圖片來增加頁面內容的吸引力和視覺效果是不可避免的。不過，在這些圖片中添加文本，可以更好地傳達信息。今天，我們將學習如何使用CSS將文本在圖片的右側顯示。

//HTML代碼
<div class="img-wrapper">
<img src="photo.jpg" alt="Photo">
<p class="img-caption">文字說明</p>
</div>
//CSS代碼
.img-wrapper {
display: inline-block;
position: relative;
}
.img-caption {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); 
color: #fff;
padding: 10px;
font-size: 1.2rem;
}

在這個例子中，我們使用了一個包含圖片和文本的div元素。我們首先將div元素設置為display: inline-block，以便在一行上放置圖片和文本。

之后，將圖像和文本容器的position屬性都設置為relative。這是為了確保文本容器的絕對定位的參考框是包含圖像的div元素，而不是整個文檔。接下來，將文本容器的位置設置為absolute，并設置top和right屬性均為0，這將使它出現在圖片的右上角。

最后，我們對文本容器進行樣式處理，包括設置背景顏色為半透明黑色、設置文字顏色為白色、設定padding、font-size等屬性。

通過這種方式，我們可以使用CSS將文本定位在圖片的右側。如果您想重新排列文本到其他位置，只需調整相對位置和絕對位置即可。