在 Web 開發(fā)中，經(jīng)常會(huì)遇到需要文字和圖片進(jìn)行換行排列的需求。比如網(wǎng)頁中的文章列表，一篇文章通常會(huì)有標(biāo)題和圖片，需要讓它們排列在一起。那么如何使用 CSS 進(jìn)行圖片和文字的換行呢？

.article {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.article img {
flex: 0 0 auto;
margin-right: 20px;
}
.article h2 {
flex: 1 1 auto;
}

以上是使用 flexbox 布局實(shí)現(xiàn)的效果。我們首先在外層容器 .article 上使用 display: flex，表示啟用彈性布局。然后設(shè)置 flex-wrap: wrap，表示當(dāng)容器的寬度不足以容納所有子元素時(shí)，容器會(huì)自動(dòng)換行。

圖片的樣式中，我們使用 flex: 0 0 auto，表示圖片不會(huì)伸縮，也不會(huì)縮小。同時(shí)，為了讓圖片和文字之間有一定的間隙，設(shè)置了 margin-right: 20px。

標(biāo)題的樣式中，使用了 flex: 1 1 auto，表示標(biāo)題會(huì)隨著容器的寬度而自動(dòng)伸縮，因此我們不需要為標(biāo)題設(shè)置固定的寬度。

以上代碼示例只是一種實(shí)現(xiàn)方式，實(shí)際上還有很多其他的方法，比如使用 float 和 clear 屬性、使用 inline-block 元素等。不同的方法適用于不同的場(chǎng)景，需要根據(jù)實(shí)際情況選擇最合適的方案。