CSS圖文列表高度自適應是網頁設計中常用的技術之一。當列表中的圖片大小不一致時，如果不處理列表中相鄰的圖片會出現對齊不準確或者文字和圖片不相鄰的情況。這篇文章將介紹如何利用CSS實現圖文列表的高度自適應。
首先，我們需要一個HTML代碼結構作為基礎。我們常見的圖文列表結構如下：
```
這是圖1的說明文字。
這是圖2的說明文字。
這是圖3的說明文字。
```
接下來，我們使用CSS處理這個圖文列表的樣式。因為每個列表項的高度不確定，所以我們需要設置每個li元素的最小高度。
```
ul {
list-style:none;
padding:0;
margin:0;
}
li {
min-height:50px;
margin-bottom:10px;
display:flex;
}
img {
margin-right:10px;
flex-shrink:0;
}
p {
margin:0;
flex-grow:1;
}
```
上面的代碼中，`min-height`屬性設置每個列表項的最小高度。`display:flex`屬性使每個列表項呈現為均分寬度的列。然后，通過`margin-right:10px`屬性實現圖片與說明文字的間距，`flex-shrink:0`屬性避免了圖片縮小。`margin:0`屬性去掉了獨立從開頭的縮進，`flex-grow:1`屬性實現文字與圖片的分散布局。
最后，我們使用`pre`標簽把以上代碼輸出到HTML頁面中。
```
ul {
list-style:none;
padding:0;
margin:0;
}
li {
min-height:50px;
margin-bottom:10px;
display:flex;
}
img {
margin-right:10px;
flex-shrink:0;
}
p {
margin:0;
flex-grow:1;
}```
通過以上CSS代碼和HTML結構處理，我們成功地實現了圖文列表的高度自適應。圖文顯示相鄰緊湊，文字與圖片分散布局，大大提升了網頁的美觀性和可讀性。
