CSS控制圖片位置的方法

在CSS中，我們可以使用多種方法來控制圖片的位置，如果想要讓圖片排在下面，可以使用以下幾種方法：

1、使用margin-top屬性

通過給圖片添加margin-top屬性，可以讓圖片向下移動，從而排在下面。

img {
  margin-top: 20px;
}

2、使用position屬性

通過給圖片添加position屬性，并設(shè)置為relative或absolute，可以讓圖片按照指定的位置進(jìn)行排列。

img {
  position: relative;
  bottom: 0;
}

或者：

img {
  position: absolute;
  bottom: 0;
}

3、使用flexbox布局

通過給父元素添加flexbox布局，可以讓圖片按照指定的位置進(jìn)行排列。

.container {
  display: flex;
  flex-direction: column;
}
img {
  order: 2;
}

在上面的代碼中，圖片會被排在容器的下方。

4、使用grid布局

通過給父元素添加grid布局，可以讓圖片按照指定的位置進(jìn)行排列。

.container {
  display: grid;
}
img {
  grid-row: 2;
}

在上面的代碼中，圖片會被排在容器的下方。

CSS提供了多種方法來控制圖片的位置，可以根據(jù)具體的需求選擇適合的方法。