在網頁設計中，圖文混排是一種常見的展示方式，能夠豐富頁面內容，提升閱讀體驗。使用CSS也可以輕松實現圖文混排效果。

<div class="container">
<img src="example.jpg" alt="example" class="picture">
<p class="text">這里是文字內容</p>
</div>
.container {
display: flex;
align-items: center;
}
.picture {
height: 200px;
margin-right: 20px;
}
.text {
font-size: 16px;
line-height: 1.5;
}

以上代碼中，我們使用flex布局對圖片和文字進行對齊，圖片的高度和文字的行高需要相互匹配，使得頁面看起來更加美觀。在實現圖文混排效果的時候，我們也需要考慮到響應式設計，不同設備的屏幕大小會影響到圖片和文字排版的樣式。

@media (max-width: 768px) {
.container {
flex-direction: column;
}
.picture {
height: 150px;
margin-right: 0;
margin-bottom: 10px;
}
.text {
font-size: 14px;
line-height: 1.2;
}
}

在以上代碼中，我們使用@media查詢來定義不同寬度下的頁面樣式。當屏幕寬度小于等于768px時，我們將圖片和文字改為垂直排列，并根據實際情況調整圖片和文字的大小，以便于用戶在移動設備上更好地瀏覽內容。

總之，CSS的圖文混排可以輕松實現豐富的頁面展示效果，并且如上所述，我們可以根據實際情況進行響應式設計，讓頁面在不同設備上都能夠得到充分的展示。