CSS實驗：圖文混排

CSS提供了許多在網(wǎng)頁中實現(xiàn)圖文混排的方法，例如float屬性和position屬性等。在本實驗中，我們將使用這些屬性來讓文字環(huán)繞在一張圖片周圍。

.container {
width: 700px;
margin: 0 auto;
}
img {
float: left;
margin-right: 20px;
}

首先，我們需要一個父容器來包含我們的圖片和文字。在CSS中，我們可以使用以下樣式為父容器設置寬度和居中對齊。

<code><div class="container"></code>
<code><img src="image.jpg"></code>
<code><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie, nulla in tristique egestas, nulla mauris maximus ipsum, eget eleifend nisl nisi hendrerit lorem. Vivamus quis quam eu turpis interdum ullamcorper. Nulla facilisi. Proin tellus elit, bibendum ut sem scelerisque, vestibulum blandit felis. Quisque aliquam euismod tellus, vel tempor eros luctus nec.</p></code>
<code></div></code>

接下來，我們對圖片應用float屬性，將其向左浮動，并設置一定的右邊距。這樣，我們的文字就可以環(huán)繞在圖片周圍了。

p {
text-align: justify;
}

但是，我們會發(fā)現(xiàn)文字并沒有很好地填充圖片周圍的空間，產生了一些留白。為了解決這個問題，我們可以對段落文本應用text-align:justify屬性，使其填充整個環(huán)繞區(qū)域。

這樣，我們就成功實現(xiàn)了圖文混排效果！

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie, nulla in tristique egestas, nulla mauris maximus ipsum, eget eleifend nisl nisi hendrerit lorem. Vivamus quis quam eu turpis interdum ullamcorper. Nulla facilisi. Proin tellus elit, bibendum ut sem scelerisque, vestibulum blandit felis. Quisque aliquam euismod tellus, vel tempor eros luctus nec.