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

1. 使用Flex布局
2. 使用inline-block屬性
3. 使用浮動(dòng)布局（float）

CSS中圖片與文字布局技巧

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將文字與圖片放置在同一行進(jìn)行展示，這種布局可以通過(guò)CSS樣式來(lái)實(shí)現(xiàn)，使得頁(yè)面內(nèi)容更加美觀和直觀，下面介紹幾種在CSS中實(shí)現(xiàn)文字與圖片同行顯示的方法。

使用Flex布局

Flex布局是一種靈活的布局方式，可以輕松實(shí)現(xiàn)文字與圖片的同行顯示，通過(guò)設(shè)置父元素的display屬性為flex，可以使得子元素（文字和圖片）在父元素內(nèi)部水平排列。

.container {
  display: flex;
  align-items: center; /* 可選，垂直居中對(duì)齊 */
}
.text { /* 文字樣式 */
  margin-right: 10px; /* 右邊距，根據(jù)需要調(diào)整 */
}
.image { /* 圖片樣式 */
  max-width: 100px; /* ***大寬度，根據(jù)需要調(diào)整 */
}

然后在HTML中使用：

<div class="container">
  <div class="text">這里是文字</div>
  <img class="image" src="image.jpg" alt="圖片">
</div>

使用inline-block屬性

除了Flex布局外，還可以使用CSS的inline-block屬性來(lái)實(shí)現(xiàn)文字與圖片的同行顯示，將文字和圖片的display屬性都設(shè)置為inline-block即可。

.text, .image {
  display: inline-block;
  vertical-align: middle; /* 垂直居中對(duì)齊 */
}

同樣在HTML中使用相應(yīng)的標(biāo)簽并應(yīng)用這些類，這種方法相對(duì)簡(jiǎn)單，但可能需要對(duì)間距進(jìn)行微調(diào)以達(dá)到***佳效果。

使用浮動(dòng)布局（float）

在某些情況下，可以使用CSS的float屬性來(lái)使圖片浮動(dòng)在文字的旁邊，這種方法需要謹(jǐn)慎使用，因?yàn)楦?dòng)布局可能會(huì)導(dǎo)致布局混亂，但在某些特定場(chǎng)景下，它可以非常有效地實(shí)現(xiàn)文字和圖片的同行顯示。

.text { /* 文字樣式 */
  float: left; /* 或right，根據(jù)需求調(diào)整 */
  margin-right: 10px; /* 右邊距 */
}
.image { /* 圖片樣式 */
  vertical-align: top; /* 防止底部留縫隙 */
}
``` 然后在HTML中按照需求放置文字和圖片元素，需要注意的是，使用浮動(dòng)布局后可能需要清除浮動(dòng)影響，以避免影響其他元素布局，可以通過(guò)添加清除浮動(dòng)的元素或使用clearfix類來(lái)實(shí)現(xiàn)，float屬性在現(xiàn)代布局中已較少使用，但在某些特定情況下仍然非常有用。