在網(wǎng)頁(yè)設(shè)計(jì)中，圖文混排是一種常見(jiàn)的展示方式，能夠豐富頁(yè)面內(nèi)容，提升閱讀體驗(yàn)。使用CSS也可以輕松實(shí)現(xiàn)圖文混排效果。

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

以上代碼中，我們使用flex布局對(duì)圖片和文字進(jìn)行對(duì)齊，圖片的高度和文字的行高需要相互匹配，使得頁(yè)面看起來(lái)更加美觀。在實(shí)現(xiàn)圖文混排效果的時(shí)候，我們也需要考慮到響應(yīng)式設(shè)計(jì)，不同設(shè)備的屏幕大小會(huì)影響到圖片和文字排版的樣式。

@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查詢來(lái)定義不同寬度下的頁(yè)面樣式。當(dāng)屏幕寬度小于等于768px時(shí)，我們將圖片和文字改為垂直排列，并根據(jù)實(shí)際情況調(diào)整圖片和文字的大小，以便于用戶在移動(dòng)設(shè)備上更好地瀏覽內(nèi)容。

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