如何实现宽屏时媒体区块浮动至标题文本右侧的布局？

Hey there! I’ve run into this exact layout scenario before—let’s get it sorted for you. The core issue here is making sure your title and text stay grouped together on wider screens, while moving the media block to the right. Here’s how to fix it step by step:

First, Tweak Your HTML Structure #

The key prerequisite is wrapping your title and text in a single container. This ensures they stay as a unified block when we switch to the horizontal layout. Your structure should look something like this:

<div class="content">
  <div class="content__text-group">
    <h2 class="content__title">Your Heading Here</h2>
    <p class="content__body">Your descriptive text that should sit directly below the title, even on wide screens.</p>
  </div>
  <div class="content__media">
    <!-- Your image, video, or other media -->
    <img src="your-media-file.jpg" alt="Description of your media">
  </div>
</div>

Solution 1: Using Flexbox (Most Intuitive for This Case) #

Flexbox makes it easy to switch between vertical and horizontal layouts with media queries. Here’s the CSS:

/* Default vertical stack for small screens */
.content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Adds spacing between blocks - adjust as needed */
}

/* Switch to horizontal layout when screen is wide enough */
@media (min-width: 768px) { /* Adjust this breakpoint to your needs */
  .content {
    flex-direction: row;
    align-items: flex-start; /* Prevents media block from stretching to match text height */
  }

  /* Let the title+text group take up remaining space on the left */
  .content__text-group {
    flex: 1;
    margin-right: 2rem; /* Spacing between text and media */
  }

  /* Fix the media block's width on the right */
  .content__media {
    flex: 0 0 320px; /* Fixed width - change to a percentage like 30% if preferred */
  }

  /* Ensure media doesn't overflow its container */
  .content__media img {
    width: 100%;
    height: auto;
    display: block;
  }
}

Solution 2: Using CSS Grid (Great for More Complex Layouts) #

If you prefer Grid, it works just as well and gives you precise control over column sizes:

/* Default single-column stack */
.content {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Two-column layout for wide screens */
@media (min-width: 768px) {
  .content {
    grid-template-columns: 1fr 320px; /* Left column flexible, right column fixed width */
    align-items: flex-start;
  }

  /* Assign each block to its respective column */
  .content__text-group {
    grid-column: 1;
  }

  .content__media {
    grid-column: 2;
  }
}

Quick Notes to Avoid Pitfalls #

• Breakpoint Value: Adjust min-width: 768px to whatever screen width you want the layout to switch at (e.g., 1024px for desktop-only).
• Spacing: The gap and margin-right values are optional but help keep the layout clean—tweak them to match your design system.
• Media Responsiveness: Always make sure your media (images/videos) are set to width:100% so they scale properly in their container.

That should do it! Your text will now stay directly below the title on wide screens, with the media block neatly aligned to the right.

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