在網頁設計中，圖片和文字是兩個不可或缺的元素。如果不加以處理，它們之間的表現形式可能會出現不協調的情況。那么如何才能讓圖片和文字并排顯示呢？這時需要用到 CSS 樣式。 在 CSS 中，圖片和文字并排顯示有多種方式，包括 inline、float、flex、grid 等。其中，最常見的是使用 float 來實現圖片與文字并列。 下面是使用 float 屬性的樣例代碼：

p {
width: 500px;
}
img {
float: left;
margin-right: 20px;
}

上面的代碼實現了圖片與文字左右并列，其中 p 標簽設置了寬度為 500px，而 img 標簽通過 float:left 設置了浮動屬性，并通過 margin-right: 20px 添加了圖片與文本之間的間距。 除了 float 以外，使用 inline-block 也可以讓圖片和文字并列。但需要注意的是，inline-block 會受到空格、回車等文本節點的影響，需要通過消除空格等方式來排版。

p {
white-space: nowrap;
}
img {
display: inline-block;
margin-right: 20px;
}

上面的代碼演示了使用 inline-block 實現圖片和文字并列，p 標簽設置了 white-space: nowrap 屬性來禁止空格換行，從而避免文字出現折行問題。 在實際應用中，可以根據具體場景選擇適合的排版方式。通過 CSS 樣式的靈活運用，可以讓網頁設計更加美觀和精致。