圖文在一行的效果在網頁設計中經常用到，可以使得網頁排版更加美觀大方。但是實現起來可能并不簡單，下面我們來介紹如何使用 CSS 實現圖文在一行。

首先，需要使用display:flex屬性。將包裹內容的父元素設置為display:flex后，子元素可以被視為彈性盒子布局，可以很方便地進行排版。然后，我們需要把圖像和文字都放在一個div元素中，并設置其樣式。

<div class="container">
<img src="pic.jpg">
<p>這是一段文本。</p>
 </div>
.container{
display:flex;
align-items:center;
 }
.container img{
max-width:100%;
height:auto;
 }
.container p{
margin-left:20px;
flex-wrap:wrap;
width:70%;
word-wrap:break-word;
 }

上面的代碼將圖像和文本均放在了一個div元素中，并使用display:flex屬性使其成為彈性盒子容器。其中，align-items:center將元素沿著交叉軸居中排列。接下來，我們對圖像和文字分別進行樣式設置：圖像元素使用max-width:100%和height:auto讓其按比例縮放；文本元素使用margin-left:20px設置與圖像的間距，flex-wrap:wrap和width:70%控制文字的換行，并使用word-wrap:break-word實現單詞換行效果。

如此一來，圖文在一行的效果就實現了。需要注意的是，如果文本數量過多，可能無法完全顯示在一行中，需要調整文字元素的寬度或字體大小。同時，還可以使用 CSS3 的多列布局來更好地展示文本內容。