如何实现：@media(max-width:1200px)图片左浮文本旁，@media(max-width:360px)图片居文本上方

嘿，这个需求太常见啦，用CSS媒体查询就能轻松搞定！我给你一套完整的可复用代码示例，直接套用改改细节就能用：

第一步：HTML结构 #

先把图片和文本放在一个容器里，方便统一控制布局：

<div class="content-container">
  <img src="你的图片地址.jpg" alt="图片描述文本" class="responsive-image">
  <p>这里是你的文本内容，随便写多少都行... 线条代表文本，线条代表文本，线条代表文本，线条代表文本，线条代表文本，线条代表文本，线条代表文本。</p>
  <p>更多文本内容... 线条代表文本，线条代表文本，线条代表文本，线条代表文本，线条代表文本。</p>
</div>

第二步：CSS样式 #

先写通用基础样式，再用媒体查询针对不同屏幕尺寸调整布局：

/* 基础通用样式 */
.content-container {
  max-width: 1200px; /* 对应你说的最大分辨率容器宽度 */
  margin: 0 auto; /* 让容器在页面居中 */
  padding: 20px;
}

.responsive-image {
  width: 300px; /* 图片基础宽度，可按需调整 */
  height: auto; /* 强制保持图片比例，避免变形 */
  margin-right: 20px; /* 图片和文本的右侧间距 */
  margin-bottom: 20px; /* 底部间距，移动端会用到 */
}

/* 大屏（≤1200px）下：图片左浮，文本环绕 */
@media (max-width: 1200px) {
  .responsive-image {
    float: left;
  }
}

/* 移动设备（≤360px）下：图片置顶，取消浮动 */
@media (max-width: 360px) {
  .responsive-image {
    float: none;
    display: block; /* 让图片独占一行 */
    margin-right: 0; /* 取消右侧间距 */
    margin-left: auto;
    margin-right: auto; /* 可选：让图片在移动端居中显示 */
  }
}

关键细节说明 #

• 大屏模式下用float: left实现图片左浮，文本会自动环绕在右侧，完全匹配你的需求；
• 移动端直接取消浮动，把图片设为块级元素，它就会独占一行，自然跑到文本上方；
• height: auto是必须的，能保证图片缩放时不会拉伸变形；
• 所有间距、尺寸数值都可以根据你的实际设计需求调整，非常灵活。

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