在網(wǎng)頁設計中，經(jīng)常需要將文字和圖片放在一起呈現(xiàn)，更好地展現(xiàn)出設計效果。為了實現(xiàn)這樣的設計效果，需要使用 CSS 將圖片和文字分別放在不同的列中。

一種實現(xiàn)方式是使用浮動屬性。首先需要將包含圖片的div設置為浮動，然后將文字所在的div設置為 “清除浮動”（clear:both），這樣就可以使得圖片和文字分別沿著頁面不同的列呈現(xiàn)。

.img {
float: left;
}
.text {
clear: both;
}

另一種實現(xiàn)方式是使用 CSS3 引入的 “多列” 屬性，用一行代碼即可實現(xiàn)圖片和文字的分列展示。

.container {
columns: 2;
}

使用多列布局需要注意，如果某一段落文字過長，會出現(xiàn)文字中斷或者圖片溢出的情況。可以通過設置break-inside屬性來避免這種情況的發(fā)生。

.container {
columns: 2;
break-inside: avoid;
}

總之，無論是使用浮動還是多列布局，在實現(xiàn)圖片和文字分列展示的過程中，都需要注意設定相應的屬性，避免出現(xiàn)不必要的排版混亂。