在網頁中，圖文混排是非常常見的一種展示方式。而要實現圖文混排，則需要使用到CSS。下面我們以一些實例的形式，來演示一下如何使用CSS達到圖文混排的效果。

我們將演示基礎的圖文混排效果，即讓圖片和文字在同一行中展示。

代碼如下：
HTML:
<div class="wrapper">
<img src="image.png">
<p>這是一段內容</p>
</div>
CSS:
.wrapper {
display: flex;
align-items: center;
}

上述代碼中，我們首先創建一個wrapper類，該類用于包裹我們需要展示的圖片和內容。然后我們使用了flex布局，使得wrapper內部的元素水平居中對齊，從而實現圖片和內容在同一行展示的效果。

接下來，我們將演示如何使用CSS處理不同長度圖片和內容的圖文混排效果。

代碼如下：
HTML:
<div class="wrapper">
<img src="image1.png">
<p>這是一個很長的內容，很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的內容</p>
</div>
CSS:
.wrapper {
display: flex;
align-items: center;
}
img {
max-width: 50%;
}

在這個例子中，我們將圖片和內容包裹在一個wrapper類中，并且使用flex布局實現了圖片和內容在同一行展示的效果。然而，這次的圖片和內容長度不一，導致圖片會擠壓內容。為了解決這個問題，我們使用了CSS的max-width屬性，限制了圖片最大寬度為容器的50%。這樣即使圖片過寬，也不會對內容產生影響。

通過上述兩個例子，我們可以看出CSS是實現圖文混排的核心。我們只要使用合適的布局和CSS屬性，就可以輕易實現各種復雜的圖文組合效果。