如何实现桌面端元素右浮、移动端位于文本下方的响应式布局？

需求回顾 #

• 桌面端：卡片向右浮动，文本环绕卡片，当文本高度超过卡片时，自动在卡片下方继续排列
• 移动端：卡片位于文本下方，无需浮动

方案一：CSS Grid（推荐，布局更灵活） #

无需调整HTML结构，通过Grid的行列定位实现需求，兼容现代浏览器。

HTML结构 #

<div class="layout-container">
  <div class="text-block">
    <!-- 长文本内容 -->
    这里是需要环绕卡片的长文本内容，当内容高度超过右侧卡片时，文本会自动延伸到卡片下方，填满整个容器宽度...（可自行添加更多测试文本）
  </div>
  <div class="sidebar-card">
    <!-- 卡片内容 -->
    右侧卡片区域<br>
    固定高度或自适应内容
  </div>
</div>

CSS样式 #

.layout-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 文本占剩余宽度，卡片自适应宽度 */
  gap: 1.5rem; /* 文本与卡片的间距 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.sidebar-card {
  grid-column: 2;
  grid-row: 1; /* 卡片固定在第一行第二列 */
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-block {
  grid-column: 1;
  grid-row: 1 / span 2; /* 文本跨两行，超过卡片高度后自动延伸到下方 */
  line-height: 1.6;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
  .sidebar-card {
    grid-column: 1;
    grid-row: 2; /* 移动端卡片排在文本之后 */
  }
}

方案二：Float布局（简洁，适合简单场景） #

利用CSS浮动特性，无需复杂布局属性，就能实现文本环绕效果。

HTML结构 #

<div class="layout-container">
  <div class="text-block">
    <!-- 长文本内容 -->
    这里是需要环绕卡片的长文本内容，当内容高度超过右侧卡片时，文本会自动延伸到卡片下方，填满整个容器宽度...（可自行添加更多测试文本）
  </div>
  <div class="sidebar-card">
    <!-- 卡片内容 -->
    右侧卡片区域<br>
    固定高度或自适应内容
  </div>
</div>

CSS样式 #

.layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.sidebar-card {
  float: right;
  width: 280px; /* 自定义卡片宽度 */
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-block {
  line-height: 1.6;
}

/* 清除浮动（可选，避免容器高度坍塌） */
.layout-container::after {
  content: "";
  display: table;
  clear: both;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .sidebar-card {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

为什么Bootstrap列布局不适用？ #

Bootstrap的栅格系统是固定列宽分区，文本在左列、卡片在右列的布局下，即使文本高度超过卡片，文本也只会局限在左列区域，无法延伸到卡片下方的整宽空间，不符合文本环绕的需求。

内容的提问来源于stack exchange，提问作者J0ANMM