在網頁設計中，圖文混排是非常常見的需求，使用CSS可以方便地實現圖文混排的布局。下面就來介紹一下CSS圖文混排的實驗。 首先，我們需要在HTML中添加一些文本和圖片。如下所示：

<div class="container">
<p>這是一段文本</p>
<img src="example.jpg" alt="example image">
<p>這是另一段文本</p>
</div>

然后，在CSS中將這些元素進行布局。我們可以使用浮動來使文本和圖片在一行顯示。如下所示：

.container {
overflow: hidden; /*清除浮動*/
}
p {
float: left;
width: 50%;
}
img {
float: right;
width: 50%;
}

其中，我們將

元素和元素的寬度都設置為50%，并將

元素向左浮動，將元素向右浮動。同時，為了避免浮動元素對外部元素的影響，我們在容器元素中添加了overflow:hidden屬性，來清除浮動。 最后，我們可以給文本和圖片添加一些樣式，如文字大小和間距等。

p {
float: left;
width: 50%;
font-size: 16px;
line-height: 1.5;
margin-right: 20px;
}
img {
float: right;
width: 50%;
margin-left: 20px;
}

通過這些CSS樣式，我們可以使文本與圖片看起來更美觀、有序。 總體而言，CSS圖文混排實驗非常簡單易懂，只需要使用一些基礎的CSS屬性即可實現。希望這篇文章能夠幫助大家更加深入地理解CSS的應用。