在網頁排版中，有時候需要將某些文字與圖片或圖標放在一起呈現，讓頁面更美觀，更易于用戶理解信息。本文介紹一種實現方法，即通過 CSS 將文字和圖片分別放在不同的行內塊元素中，然后使用 float 屬性將兩者橫向排列。

首先，在 HTML 中加入一個 p 元素和一個包含圖片的 div 元素：

<p>這是一段文字</p>
<div class="image">
<img src="example.png" alt="示例圖片">
</div>

接著，在 CSS 中將這兩個元素設置為行內塊元素，并利用 float 屬性將它們橫向排列：

p {
display: inline-block;
vertical-align: middle;
}
.image {
display: inline-block;
float: right;
}

其中，display 屬性用于將元素設置為行內塊元素，使圖片和文字能夠在同一行展示；float 屬性用于將圖片向右浮動，讓文字和圖片排列在同一行的左右兩側。

最后，為了讓圖片與文字之間有一定的間距，可以為圖片的父元素設置一定的右外邊距，如：

.image {
display: inline-block;
float: right;
margin-right: 10px;
}

這樣，就可以實現文字與圖片的橫向排列了。需要注意的是，為了保證頁面的響應式布局，在移動端應針對不同的屏幕尺寸進行適配。