CSS中兩個(gè)圖片的分隔與排版

在CSS中，我們可以使用多種方法來(lái)分隔和排版兩個(gè)圖片，以下是一些常見(jiàn)的方法：

1、使用margin屬性：

- 通過(guò)設(shè)置圖片的margin屬性，我們可以輕松地使兩個(gè)圖片之間存在一定的距離，如果兩個(gè)圖片都是div元素，我們可以這樣寫(xiě)：

```css

div {

margin: 10px;

}

```

- 這個(gè)代碼將使兩個(gè)div元素（圖片）之間保持10像素的距離。

2、使用float屬性：

- 通過(guò)設(shè)置圖片的float屬性，我們可以使圖片浮動(dòng)在文本的左側(cè)或右側(cè)。

```css

img {

float: left;

}

```

- 這個(gè)代碼將使圖片浮動(dòng)在文本的左側(cè)，而不會(huì)影響其他元素的排版。

3、使用position屬性：

- 通過(guò)設(shè)置圖片的position屬性為absolute或relative，我們可以***地定位圖片的位置。

```css

img {

position: absolute;

top: 10px;

left: 10px;

}

```

- 這個(gè)代碼將使圖片定位在距離頁(yè)面頂部和左側(cè)各10像素的位置。

4、使用flexbox布局：

- Flexbox是一種現(xiàn)代的CSS布局技術(shù)，它允許我們輕松地創(chuàng)建復(fù)雜的布局結(jié)構(gòu)。

```css

.container {

display: flex;

justify-content: space-between;

}

```

- 這個(gè)代碼將使兩個(gè)圖片分別位于容器的兩側(cè)，并保持一定的距離。

5、使用grid布局：

- Grid布局是另一種現(xiàn)代的CSS布局技術(shù)，它允許我們創(chuàng)建復(fù)雜的二維布局。

```css

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

```

- 這個(gè)代碼將使兩個(gè)圖片分別位于容器的兩個(gè)列中，并自動(dòng)調(diào)整列寬以適應(yīng)圖片的大小。