响应式布局求助：移动端如何让文本停止环绕图片并移至下方

Hey there! I’ve run into this exact issue before—let’s get your text to move below the image on mobile without breaking the desktop layout. The main problem with your current code is that you’re using the old align="left" HTML attribute (which relies on outdated floating behavior) and your split div structure makes responsive control harder.

Here’s a clean, modern solution:

Step 1: Refactor Your HTML #

First, wrap both the image and text in a single container. This lets us use CSS layout tools to control their positioning easily:

<div class="content-group">
  <img src="/square.png" class="ms" alt="Your image description here"/>
  <span class="ms">两段文本</span>
</div>

Step 2: Use Flexbox for Responsive Control #

Flexbox is perfect for this kind of dynamic layout. We’ll set up a horizontal layout for desktop, then switch to vertical for mobile with a media query:

/* Desktop: Keep image and text side-by-side (text wraps naturally if longer) */
.content-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* Adds clean spacing between image and text—adjust as needed */
}

/* Mobile: Stack text below the image */
@media (max-width: 768px) {
  .content-group {
    flex-direction: column;
  }
  
  /* Optional: Make the image full-width on mobile for better fit */
  .content-group img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }
}

Alternative: CSS Grid (If You Prefer) #

If you’re more comfortable with Grid, this works too:

.content-group {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .content-group {
    grid-template-columns: 1fr;
  }
}

Quick Fix If You Can’t Change HTML #

If you need to keep your original HTML structure, you can override the floating behavior from align="left" on mobile:

@media (max-width: 768px) {
  img.ms[align="left"] {
    float: none;
    display: block;
    margin: 0 auto 1rem; /* Centers the image and adds space below it */
  }
}

This last method works, but I strongly recommend refactoring the HTML—it makes your layout more maintainable and aligns with modern web standards.

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