HTML和CSS是現代前端開發所必需的兩個基礎技能。在實現頁面布局時，經常遇到左圖右字的組合。那么，如何用CSS實現這一布局呢？ 首先，我們需要在HTML文件中放置一張圖片和一段文字。可以將它們放在一個div標簽中：

<div class="left-text">
<img src="image.jpg" alt="圖片">
<p>這里是文字內容</p>
</div>

接下來，我們需要給這個div添加一些CSS樣式，將圖片和文字分別排列到左側和右側。可以使用float屬性：

.left-text {
width: 100%;
margin-bottom: 10px;
}
.left-text img {
float: left;
margin-right: 10px;
}
.left-text p {
float: right;
}

以上代碼中，我們給div設置了寬度為100%，并給它留下一些下邊距。然后，我們使用float屬性將圖片和文字分別放置于左側和右側，通過給圖片留下margin-right間隙，讓圖片和文字之間有一定的距離。 最后，我們可以做一些調整，比如給圖片設置max-width屬性，使圖片不會超出div的寬度：

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

通過以上CSS樣式，我們實現了一個左圖右字的基本布局。當然，如果需要制作更復雜的布局，可以考慮使用flexbox或者grid布局。