<div><img src="example.jpg" alt="example image"><p>這是一段文字。</p></div>

接下來，我們可以使用CSS來將圖片和文字進行排列。

情況一：圖片在左，文字在右

div {
display: flex;
flex-direction: row;
align-items: center;
}
img {
order: -1;
flex: 1;
}
p {
flex: 1;
}

在這個例子中，我們使用了flexbox布局。首先，我們將容器的方向設置為“row”，意思是水平排列元素。然后，讓圖片與文字都位于容器的中心位置。接著，我們使用“order”屬性將圖片設置在第一位，而“flex”屬性則讓圖片的寬度自適應。同樣地，我們讓文字也具備自適應寬度，以使它與圖片平衡。

情況二：圖片在右，文字在左

div {
display: flex;
flex-direction: row;
align-items: center;
}
img {
flex: 1;
}
p {
flex: 1;
}

這個例子與第一個例子相似，但把圖片放在最后一位。

情況三：圖片在上，文字在下

div {
display: flex;
flex-direction: column;
align-items: center;
}
img {
margin-bottom: 1rem;
}

在這個例子中，我們將容器的方向設置垂直，意思是豎直排列元素。然后，讓圖片和文字都位于容器的中心位置。接著，我們利用“margin-bottom”屬性讓文字下移，以避免與圖片重合。

總之，使用CSS可以實現多種圖片和文字排版方式，只需要使用正確的屬性和方法來實現。以上這些例子只是其中的一部分，而在實際的網頁設計中，應該根據需要選擇最合適的排版方式。