在網頁設計中，常常需要把圖片和文本并排顯示，這時候就需要用到CSS。CSS是一種網頁樣式語言，它可以控制HTML元素的外觀和樣式。下面我們來介紹一下如何在CSS中實現圖片和div并排顯示。

<div class="container">
<img src="image.jpg" alt="圖片">
<div class="text">
<p>這是一段文本內容</p>
</div>
</div>

上面是我們的HTML代碼，其中container是一個div，它包括一張圖片和一個文本div。我們將使用CSS來使得這兩個元素并排顯示。

.container {
display: flex; /* 聲明容器使用flex布局 */
align-items: center; /* 垂直居中 */
}
img {
width: 50%; /* 圖片占50%寬度 */
height: auto; /* 高度保持比例 */
}
.text {
flex: 1; /* 剩余寬度占滿 */
padding: 0 1rem; /* 添加1rem的左右內邊距 */
}

上面是CSS代碼，我們使用了flex布局來使得圖片和文本并排顯示。具體來說，我們將容器設置為flex，然后使用align-items讓圖片和文本垂直居中。對于圖片，我們設置寬度為50%，高度自適應。對于文本div，我們使用flex: 1來讓它自動占滿容器的剩余寬度，同時添加了一定的內邊距。

有了上面的HTML和CSS代碼，我們就能實現圖片和文本的并排顯示了。這樣的設計不僅美觀，而且能夠節省頁面空間，提升用戶體驗。