標簽來表示段落，標簽來表示圖片，并為它們添加對應的類名或id。例如：

<article>
<h2>文章標題</h2>
<p class="article-content">文章內容...</p>
<img src="example.jpg" alt="圖片描述" class="article-img">
</article>

接下來，我們需要使用CSS來控制這些元素的樣式，從而實現圖文布局。具體方式如下：

1.對文字元素進行樣式設置。

.article-content {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}

在這里，我們設置了文章內容文字的字號、行高和下邊距。

2.對圖片元素進行樣式設置。

.article-img {
float: left;
margin-right: 20px;
max-width: 100%;
}

在這里，我們使用了float屬性將圖片向左浮動，并為其添加了右邊距。另外，我們通過max-width屬性使圖片在不超出其父元素寬度的情況下保持原始比例。

3.對文章元素進行樣式設置。

article {
overflow: hidden;
}

由于我們使用了float屬性對圖片進行浮動，因此需要使用overflow屬性來清除其父元素的浮動，從而避免圖片和文字重疊。在這里，我們設置為hidden，表示隱藏溢出部分。

通過以上設置，我們就可以實現一個簡單的圖文布局了。當然，不同的頁面需求會有所不同，需要根據具體情況進行樣式調整。