今天我們來學習一種在網頁制作中常用的技巧：圖片與文字并排排列。通過在CSS中設置圖片和文字的樣式，我們可以將它們排列在同一行或同一列，從而使網頁更加美觀和有層次感。 首先，我們需要在HTML中添加圖片和文字，并為它們分別添加類或ID方便CSS樣式調用：

<div class="container"><img src="img.jpg" class="image"><p class="text">這是一段文字。</p></div>

然后，我們可以通過CSS的float屬性來設置圖片和文字的排列方向。例如，如果我們想讓圖片在左邊，文字在右邊排列，可以這樣寫：

.container {
width: 500px;
}
.image {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
}
.text {
float: left;
width: 300px;
}

這個例子中，我們設置了一個500像素寬的容器，圖片使用float: left屬性向左浮動，寬度為150像素，高度為150像素，并設置了20像素的右邊距；文字也使用float: left向左浮動，并設置寬度為300像素。這樣，圖片和文字就會并排排列在一起。 另外，我們還可以通過CSS的display屬性來實現垂直排列的效果。例如，如果我們想讓圖片在上方，文字在下方排列，可以這樣寫：

.container {
width: 500px;
}
.image {
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
}
.text {
text-align: center;
}

這個例子中，我們設置了一個500像素寬的容器，圖片的display屬性設為block，然后使用margin: 0 auto屬性使圖片水平居中；文字使用text-align: center屬性使文字居中。這樣，圖片和文字就會垂直排列在一起。 總之，通過CSS的float和display屬性，我們可以輕松設置圖片和文字的排列方式。這種技巧在網頁制作中非常常用，相信它能幫助你打造更加美觀和有層次感的網頁。