使用css将overflow div放在下一行

<div class="container">
  <div class="item">内容1</div>
  <div class="item overflow-item">内容2（溢出）</div>
  <div class="item">内容3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.item {
  flex: 1 1 auto; /* 每个项目占据可用空间 */
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.overflow-item {
  flex-basis: 100%; /* 强制溢出项占满一行 */
}

<div class="container">
  <div class="item">内容1</div>
  <div class="item overflow-item">内容2（溢出）</div>
  <div class="item">内容3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应列宽 */
  gap: 10px;
}

.item {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.overflow-item {
  grid-column: span 1; /* 强制溢出项占满一行 */
}

<div class="container">
  <div class="item">内容1</div>
  <div class="item overflow-item">内容2（溢出）</div>
  <div class="item">内容3</div>
</div>

.container {
  overflow: hidden; /* 清除浮动 */
}

.item {
  float: left;
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  width: calc(33.33% - 20px); /* 每个项目占据三分之一宽度减去间距 */
}

.overflow-item {
  clear: both; /* 清除浮动，强制换行 */
}