在網頁設計中，常常需要將不同的元素并排排列，比如多張圖片并排展示、多個按鈕并排放置等。使用CSS可以很方便地實現(xiàn)這些效果。

水平排列

在CSS中，我們可以使用float屬性來實現(xiàn)水平排列，將要并排排列的元素設置為浮動狀態(tài)。

<style>
.box{
float: left;
}
</style>
<div>
<div class="box"><img src="img1.jpg"></div>
<div class="box"><img src="img2.jpg"></div>
<div class="box"><img src="img3.jpg"></div>
</div>

在上述代碼中，我們首先定義了.box類，將其中的元素設置為浮動狀態(tài)，接著在父元素中放置了三個.box元素，其中包含三張圖片。這三個.box元素會自動并排排列。

垂直排列

如果要將元素上下垂直排列，可以使用display屬性將元素設置為塊級元素，再使用vertical-align屬性將元素垂直居中。

<style>
.box{
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<div class="box"><img src="img1.jpg"></div>
<div class="box"><img src="img2.jpg"></div>
<div class="box"><img src="img3.jpg"></div>
</div>

在上述代碼中，我們將.box元素設置為inline-block，使其按照行內元素展示，然后使用vertical-align屬性將元素垂直居中。這樣，三張圖片就會垂直排列。

元素間距

在默認情況下，元素之間會存在一定的間距。

<style>
.box{
float: left;
margin-right: 10px;
}
</style>
<div>
<div class="box"><img src="img1.jpg"></div>
<div class="box"><img src="img2.jpg"></div>
<div class="box"><img src="img3.jpg"></div>
</div>

在上述代碼中，我們添加了margin-right屬性，使得三張圖片之間的間距變?yōu)?0px。

總結

使用以上方法，可以輕松實現(xiàn)元素的并排排列。需要注意的是，當元素包含文本內容時，會影響排列效果，需要使用vertical-align屬性進行調整。