CSS控制DIV橫向排列

在Web開發中，我們經常需要控制多個DIV元素橫向排列，這是一種常見的布局方式。在CSS中，有多種方法可以實現這種效果。下面我們來逐一介紹。

方法一：使用float屬性

.box{
float: left;
width: 100px;
height: 100px;
margin-right: 10px; /*設置元素之間的間距*/
}

在給DIV添加浮動屬性后，元素會依次從左往右排列，并自動換行。需要注意的是，為了保證元素的寬度一致，我們需要給每個DIV設置相同的寬度。

方法二：使用display屬性

.container{
display: flex;
justify-content: space-between; /*設置元素之間的間距*/
}
.box{
width: 100px;
height: 100px;
}

在給容器添加flex屬性后，可以方便地控制子元素的排列方式。例如使用justify-content屬性設置元素之間的間距。

方法三：使用inline-block屬性

.box{
display: inline-block;
width: 100px;
height: 100px;
margin-right: 10px; /*設置元素之間的間距*/
vertical-align: top; /*將元素頂端對齊*/
}

給DIV添加inline-block屬性后，元素就可以順序排列，而且不會自動換行。為了保證元素之間有足夠的間距，需要設置每個DIV的margin-right屬性。另外，因為默認情況下inline-block元素會對齊底部，我們需要使用vertical-align屬性將元素頂端對齊。

以上就是三種常見的CSS控制DIV橫向排列的方法。需要根據具體的需求來選擇合適的方法，以達到最佳的效果。