5个div元素响应式布局实现遇阻，求对应CSS解决方案

Got it, let's get your 5-container responsive layout sorted out! Your existing HTML structure is ideal for this—we can use two modern CSS approaches (Flexbox or Grid) to make it adapt seamlessly across different screen sizes. Let's break both down:

First, let's confirm your HTML structure (cleaned up a bit): #

<div class="AllCont">
  <div class="ContQuint">
    <div><img src="your-image-1.jpg" alt="Image 1"></div>
  </div>
  <div class="ContQuint">
    <div><img src="your-image-2.jpg" alt="Image 2"></div>
  </div>
  <div class="ContQuint">
    <div><img src="your-image-3.jpg" alt="Image 3"></div>
  </div>
  <div class="ContQuint">
    <div><img src="your-image-4.jpg" alt="Image 4"></div>
  </div>
  <div class="ContQuint">
    <div><img src="your-image-5.jpg" alt="Image 5"></div>
  </div>
</div>

(I added actual <img> tags since you mentioned images—just swap the src/alt with your real assets!)

Option 1: Flexbox (Great for flexible alignment control) #

This approach uses Flexbox to wrap the containers when the screen gets too small, with media queries to adjust column counts for different devices:

/* Base styles for the wrapper */
.AllCont {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Adds space between containers—adjust as needed */
  padding: 1rem; /* Optional: adds padding around the whole layout */
}

/* Style for each individual container */
.ContQuint {
  flex: 1 1 calc(20% - 1rem); /* 5 columns on large screens (20% width minus gap) */
  box-sizing: border-box; /* Ensures padding/border don't break the width calculation */
}

/* Make images responsive inside each container */
.ContQuint div img {
  width: 100%;
  height: auto;
  display: block; /* Removes extra space below images */
}

/* Tablet screens: switch to 3 columns */
@media (max-width: 768px) {
  .ContQuint {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

/* Mobile screens: switch to 1 column */
@media (max-width: 480px) {
  .ContQuint {
    flex: 1 1 100%;
  }
}

Option 2: CSS Grid (Concise, column-first layout) #

Grid is even simpler for this use case—we can use auto-fit and minmax to let the browser automatically adjust columns based on screen size:

/* Base styles for the wrapper */
.AllCont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Minimum 200px per column, expands to fill space */
  gap: 1rem;
  padding: 1rem;
}

/* Style for each container + responsive images */
.ContQuint {
  box-sizing: border-box;
}

.ContQuint div img {
  width: 100%;
  height: auto;
  display: block;
}

With Grid, you don't need media queries unless you want to force specific column counts at certain breakpoints—otherwise, it'll automatically wrap columns when the screen can't fit the minimum 200px width.

Key Notes: #

• The gap property replaces old margin hacks to add consistent space between containers without overflow issues.
• box-sizing: border-box ensures any padding or borders you add to .ContQuint won't make it wider than intended.
• The responsive image styles prevent images from overflowing their containers and maintain aspect ratio.

Either approach will work perfectly—Flexbox gives you more control over vertical/horizontal alignment if you need it, while Grid is super clean for column-based layouts. Tweak the gap sizes, minimum widths, or breakpoints to match your design!

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