css不规则的排列

CSS不规则排列是一种非传统的设计风格。相较于经典的网页设计，它更加自由、生动，适用于那些需要更多创意和新鲜感的项目。下面我们来探讨一些实现不规则排列的方法。

/* 方法1：使用flexbox */

.container {
  display: flex;
  flex-wrap: wrap;
}

.item:nth-child(odd) {
  width: 50%;
  height: 200px;
}

.item:nth-child(even) {
  width: 33.333%;
  height: 150px;
}

/* 方法2：使用grid */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 200px;
}

.item:nth-child(odd) {
  grid-column: 1/3;
}

.item:nth-child(even) {
  grid-row: 2;
}

/* 方法3：使用position */

.container {
  position: relative;
}

.item:nth-child(odd) {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 200px;
}

.item:nth-child(even) {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 150px;
} 

以上是三种简单的实现不规则排列的方法。当然，还有很多其他的方式可以实现。我们需要根据实际需求来选择。希望这篇文章对你有所帮助。