多元素自适应排版解决方案

要实现三个元素在不同宽度下的单行和多行自适应排版，可以使用以下几种方法：

方法一：Flexbox 弹性布局

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素间距 */
}

.item {
  flex: 1 1 200px; /* 基础宽度200px，可伸缩 */
  min-width: 0; /* 防止内容溢出 */
}
</style>

方法二：CSS Grid 网格布局

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
</style>

方法三：媒体查询结合浮动

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
  <div class="clearfix"></div>
</div>

<style>
.item {
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 10px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 768px) {
  .item {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .item {
    width: 100%;
  }
}
</style>

方法四：Bootstrap 网格系统

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-12">元素1</div>
    <div class="col-md-4 col-sm-6 col-12">元素2</div>
    <div class="col-md-4 col-sm-6 col-12">元素3</div>
  </div>
</div>

注意事项

1. 元素间距：使用 gap 属性或 margin 确保元素间有适当间距
2. 内容溢出：设置 min-width: 0 或 overflow 防止内容撑开容器
3. 响应式断点：根据实际需求调整断点值
4. 浏览器兼容性：Flexbox 和 Grid 在现代浏览器中支持良好，旧版浏览器可能需要前缀

以上方法都能实现三个元素在不同宽度下的自适应排版，其中 Flexbox 和 Grid 是最现代和推荐的方式。