本文目錄導讀：

1. 使用Flexbox布局
2. 使用Grid布局

CSS實現(xiàn)文字與圖片并排布局的技巧

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將圖片與文字進行并排布局，這種布局可以通過CSS樣式來實現(xiàn)，使得頁面內(nèi)容更加美觀和易于閱讀，本文將介紹如何使用CSS來設(shè)置圖片與文字的并排布局。

使用Flexbox布局

Flexbox是一種靈活的布局方式，可以輕松實現(xiàn)圖片與文字的并排布局，我們可以將圖片和文字包裹在一個父元素中，然后給父元素設(shè)置display: flex屬性，這樣，圖片和文字就會默認并排顯示。

HTML結(jié)構(gòu)：

<div class="container">
  <img src="image.jpg" alt="圖片">
  <p>這是一段文字。</p>
</div>

CSS樣式：

.container {
  display: flex;
  align-items: center; /* 可選，根據(jù)需要進行垂直對齊 */
}

使用Grid布局

Grid布局是另一種強大的布局方式，同樣可以實現(xiàn)圖片與文字的并排布局，我們可以創(chuàng)建一個grid容器，將圖片和文字分別放在不同的grid單元中。

HTML結(jié)構(gòu)：

<div class="grid-container">
  <img class="grid-item" src="image.jpg" alt="圖片">
  <div class="grid-item">這是一段文字。</div>
</div>

CSS樣式：

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr; /* 自動寬度和剩余空間 */
  gap: 10px; /* 格子之間的間隔 */
}