CSS控制兩個(gè)形狀并列排列的方法

在CSS中，我們可以使用多種方法將兩個(gè)形狀并列排列，以下是一些常見的技巧：

1、使用Flexbox布局

Flexbox是一種靈活的布局方式，可以輕松實(shí)現(xiàn)兩個(gè)形狀并列排列，我們可以將兩個(gè)形狀放入一個(gè)Flex容器，并設(shè)置justify-content: space-between來確保它們之間有足夠的空間。

<div style="display: flex; justify-content: space-between;">
  <div style="width: 50px; height: 50px; background-color: red;"></div>
  <div style="width: 50px; height: 50px; background-color: blue;"></div>
</div>

2、使用Grid布局

Grid布局也是實(shí)現(xiàn)兩個(gè)形狀并列排列的好選擇，我們可以將兩個(gè)形狀放入一個(gè)Grid容器，并設(shè)置grid-template-columns: 1fr 1fr來平均分配空間。

<div style="display: grid; grid-template-columns: 1fr 1fr;">
  <div style="width: 50px; height: 50px; background-color: red;"></div>
  <div style="width: 50px; height: 50px; background-color: blue;"></div>
</div>

3、使用CSS定位

除了Flexbox和Grid布局，我們還可以使用CSS定位來實(shí)現(xiàn)兩個(gè)形狀并列排列，我們可以將兩個(gè)形狀設(shè)置為position: absolute，并設(shè)置left和right屬性來定位它們。

<div style="position: relative;">
  <div style="position: absolute; left: 0; width: 50px; height: 50px; background-color: red;"></div>
  <div style="position: absolute; right: 0; width: 50px; height: 50px; background-color: blue;"></div>
</div>

是三種常見的實(shí)現(xiàn)兩個(gè)形狀并列排列的方法，你可以根據(jù)自己的需求選擇適合的方法。