CSS中設置兩個盒子豎直排列的方法

在CSS中，我們可以使用多種方法將兩個盒子豎直排列，以下是一些常見的方法：

1、使用Flexbox布局

Flexbox是一種靈活的布局方式，可以輕松實現(xiàn)盒子的豎直排列，我們可以將兩個盒子包裹在一個Flex容器中，并設置Flex方向為列，從而實現(xiàn)豎直排列。

.container {
  display: flex;
  flex-direction: column;
}
.box1, .box2 {
  width: 100px;
  height: 50px;
  margin: 10px;
}

2、使用Grid布局

Grid布局也是一種可以實現(xiàn)盒子豎直排列的方法，我們可以將兩個盒子放置在一個Grid容器中，并設置Grid模板為兩列，從而實現(xiàn)豎直排列。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.box1, .box2 {
  width: 100px;
  height: 50px;
  margin: 10px;
}

3、使用***定位

***定位也是一種可以實現(xiàn)盒子豎直排列的方法，我們可以將兩個盒子設置為***定位，并通過調(diào)整top屬性來實現(xiàn)豎直排列。

.box1, .box2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  margin: 10px;
}

是三種常見的實現(xiàn)盒子豎直排列的方法，你可以根據(jù)自己的需求選擇適合的方法。