本文目錄導(dǎo)讀：

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

CSS中的左圖右文布局設(shè)計(jì)

在網(wǎng)頁(yè)設(shè)計(jì)中，左圖右文是一種常見(jiàn)的布局方式，能夠清晰地展示圖片與文字信息，提高用戶體驗(yàn)，在CSS中，我們可以通過(guò)多種方式實(shí)現(xiàn)這種布局。

使用Flex布局

Flex布局是現(xiàn)代CSS中非常強(qiáng)大的布局方式之一，可以輕松實(shí)現(xiàn)左圖右文的布局，我們可以將圖片設(shè)為flex項(xiàng)目的左側(cè)，文字設(shè)為右側(cè)，通過(guò)調(diào)整flex屬性來(lái)調(diào)整它們的位置和大小。

.container {
  display: flex;
}
.image {
  flex: 0 0 auto; /* 不伸縮 */
}
.text {
  flex: 1; /* 伸縮占滿剩余空間 */
  margin-left: 10px; /* 與圖片保持一定距離 */
}

使用Grid布局

Grid布局也是現(xiàn)代CSS中非常強(qiáng)大的布局方式之一，同樣可以實(shí)現(xiàn)左圖右文的布局，我們可以將容器設(shè)為grid，圖片放在左側(cè)，文字放在右側(cè)。

.container {
  display: grid;
  grid-template-columns: 1fr auto; /* 一列用于圖片，一列用于文字 */
}

三、使用浮動(dòng)布局（float）和媒體查詢（media query）

對(duì)于舊版瀏覽器或者需要更精細(xì)控制的場(chǎng)景，我們可以使用浮動(dòng)布局和媒體查詢來(lái)實(shí)現(xiàn)左圖右文的響應(yīng)式布局。

.image {
  float: left; /* 圖片浮動(dòng)在左側(cè) */
  margin-right: 10px; /* 與文字保持一定距離 */
}
/* 在小屏幕設(shè)備上，將圖片放在上方 */
@media (max-width: 600px) {
  .image {
    float: none; /* 取消浮動(dòng) */
    margin-bottom: 10px; /* 與文字保持一定距離 */
  }
}

就是幾種在CSS中實(shí)現(xiàn)左圖右文布局的方式，在實(shí)際應(yīng)用中，可以根據(jù)需求和場(chǎng)景選擇適合的方式，要注意布局的響應(yīng)式設(shè)計(jì)，確保在各種設(shè)備和屏幕尺寸上都能良好地展示。