在網頁制作中，對頁面布局的要求越來越高，左圖右字布局就是一種受歡迎的布局方式。空間緊湊，圖片和文字有很好的呼應，不僅能夠有效地展示內容，還可以降低閱讀的疲勞感。那么如何實現左圖右字的布局呢？

<div class="container">
<img src="img.jpg" alt="圖片" class="img">
<p class="text">文字內容...</p>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: space-between;
/* 水平方向上呈現左右兩端和居中的狀態 */
}
.img {
flex: 1;
/* 圖片占據剩余空間 */
max-width: 50%;
/* 最大寬度不超過屏幕寬度的一半 */
}
.text {
flex: 1;
/* 文字占據剩余空間 */
max-width: 50%;
/* 最大寬度不超過屏幕寬度的一半 */
}
</style>

以上是使用flex布局實現左圖右字的初步方式。總體思路是將顯示部分劃分為左右兩段以及居中，左段放置圖片，右段安排文字內容，兩段的寬度根據屏幕寬度自適應，避免因響應式而造成的布局紊亂。

需要注意的是，flex: 1;的作用是使得圖片和文字各占據剩余的空間，盡量讓顯示的區域更緊湊且占比合理。max-width: 50%;則保證了圖片和文字的最大寬度不超過屏幕寬度的一半，以防止因圖片或文字太寬而導致布局破碎。另外，同時修改flex和max-width的參數值，可以根據實際需求進行調整。

總之，通過靈活運用CSS，我們可以輕松實現理想的左圖右字布局，從而提高用戶的閱讀體驗。