CSS布局的一個常見需求是在圖片下方放置一些文字或其他元素。這可能是因為您希望圖片和相關內容更緊密地放在一起，以便更好地傳達您的信息。 在CSS中，您可以使用幾個技術來實現這個效果。下面是幾個示例： 1.使用浮動 一個簡單而常見的方法是將圖像和相關內容包裝在一個塊級元素中，然后使用浮動將其指定為左側或右側。 ```

這里是一些相關的文字

``` 在這個例子中，我們使用了一個`

`元素來包含圖像和相關內容，重要的是為了清除浮動。我們還使用了CSS浮動來將圖像向左浮動，然后使用`margin-right`將一些空白放在圖片右側。最后，我們使用CSS來將文本設置為塊級元素，以便它將其余內容推到下一行。 2.使用絕對定位 另一種方法是使用絕對定位來將相關內容放置在圖像的下方。 ```

``` 在這個例子中，我們首先創建了一個帶有相對定位的父元素。接下來，我們使用CSS絕對定位將標題設為父元素的底部。我們還使用CSS `left: 0;` 和 `width: 100%;` 來確保標題占用整個容器的寬度，并使用一些樣式屬性來添加背景色和內邊距。 3.使用Flexbox 最后，另一種方法是使用Flexbox來布置圖像和相關內容。Flexbox是一個靈活的布局方式，可以輕松地控制元素的大小和位置。 `````` 在這個例子中，我們首先將容器指定為Flexbox容器，并將元素的方向設置為垂直。這使得我們可以將標題放置在底部，而不需要使用絕對定位。我們還使用了CSS `margin-top: auto;` 來強制標題在縱向上沿著容器底部對齊。 這是三種用CSS將文字在圖片下放置的方法，您可以在實際中選擇適合自己的方法。