CSS是前端開發中必須要掌握的技能之一。其中，如何讓圖片和文字平行排列就是一個經常需要解決的問題。下面我們將介紹幾種常見的方法。

.left {
float: left;
margin-right: 20px;
}
.right {
float: right;
margin-left: 20px;
}

一種常見的方法是使用float屬性，將圖片和文字分別包裹在div中，并給其中一個設置浮動。如上述代碼所示，left類設置了浮動，同時也設置了一個右側的margin，使得圖片和文字之間存在一段空隙。同理，right類設置了不同的浮動方向和margin，使得圖片在右側，文字在左側。

.container {
display: flex;
align-items: center;
}
.img {
margin-right: 20px;
}

另一種常見的方法是使用flexbox布局。首先將包含圖片和文字的父級元素設置為一個flex容器，通過設置align-items屬性居中對齊。然后將圖片對應的類設置一個右側的margin，使得圖片和文字之間存在空隙。

.wrapper {
display: grid;
grid-template-columns: 200px auto;
}
.img {
grid-row: 1 / 2;
}
.text {
grid-row: 1 / 2;
grid-column: 2 / 3;
margin-left: 20px;
}

最后一個方法是使用CSS Grid布局。將圖片和文字分別放置在一個單元格中，通過指定grid-row和grid-column屬性，保證在同一行中并且相鄰排列，同時也設置了一個左側的margin，使得圖片和文字之間存在空隙。

總而言之，以上方法都能夠用來解決CSS中圖片和文字平行排列的問題。需要針對具體的需求和場景選擇最為適合的方法。