HTML左圖右文布局是一種常見的頁面布局方式，可以讓頁面更加美觀、易讀。在HTML中，我們可以使用div標簽來定義左右兩個部分，用img標簽添加圖片，而文字則可以使用p標簽。以下是一個簡單的示例代碼：

<div class="container">
<img src="img/photo.jpg" alt="photo" class="photo">
<p>這里是文本內容，可以自由編輯</p>
</div>

在上面的代碼中，我們使用了類名為container的div標簽來包含左右兩個部分。左邊的圖片使用了img標簽，并指定了src和alt屬性，src屬性用于指定圖片的路徑，alt屬性則是圖片加載失敗時顯示的文本。 右邊的文本內容則使用了p標簽，可以在其中自由編輯文字內容。如果需要添加更多的文字內容，可以添加多個p標簽或者使用其他標簽，如ul、ol等。 CSS也是左圖右文布局的重要組成部分，我們可以使用CSS來控制左右兩個部分的寬度、高度、位置等。以下是一個基本的CSS示例代碼：

.container {
display: flex;
align-items: center;
}
.photo {
width: 50%;
margin-right: 20px;
}

在上面的CSS代碼中，我們使用了flex布局來控制左右兩個部分的位置。align-items屬性用于垂直居中，而左邊的圖片則使用了width屬性控制寬度，margin-right屬性則控制圖片與文字之間的間距。 通過以上的HTML和CSS代碼，我們可以實現一個簡單的左圖右文布局效果。使用該布局方式，可以使我們的頁面更加靈活，更加美觀，為用戶帶來更好的閱讀體驗。