如何使用HTML/CSS实现3个或4个figure元素并排显示

Got it, let's sort out this layout issue for you! The problem with using float here is that it's an older layout tool built for text wrapping, not flexible, dynamic grids of elements. When you tried adding a third figure, it dropped to a new row because float doesn't handle spacing and responsive wrapping cleanly. Instead, Flexbox or CSS Grid will make this way easier and scalable—you can add 3, 4, or even more figures without breaking the layout.

Best Solution: Flexbox (Simple & Responsive) #

Flexbox is perfect for one-dimensional layouts (like rows of items). Here's how to adjust your code to get the exact result you want:

Updated CSS #

/* Container to hold all figures - handles the row layout */
.figure-container {
  display: flex;
  flex-wrap: wrap; /* Lets items wrap to new rows on small screens */
  gap: 1rem; /* Adds consistent space between figures */
  justify-content: center; /* Centers all figures horizontally */
  max-width: 80%; /* Match your original content width */
  margin: 0 auto; /* Centers the container on the page */
}

/* Style each individual figure */
figure {
  display: flex;
  flex-direction: column; /* Puts caption above the image */
  align-items: center; /* Centers content inside the figure */
  flex: 1 1 calc(33.333% - 1rem); /* Each figure takes ~1/3 of container width (minus gap) */
  min-width: 200px; /* Prevents figures from getting too small on mobile */
  margin: 0;
}

/* Caption styling - sits at the top, centered */
figcaption {
  margin-bottom: 0.5rem; /* Adds space between caption and image */
  text-align: center;
  font-weight: 500; /* Optional: make caption stand out */
}

/* Image styling - ensures it fits the figure */
figure img {
  width: 100%; /* Fills the figure's width */
  height: auto; /* Maintains image aspect ratio */
}

Updated HTML #

<div class="figure-container">
  <figure>
    <figcaption>Cute cat</figcaption>
    <a href="#">
      <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat">
    </a>
  </figure>
  <figure>
    <figcaption>Cute cat 2</figcaption>
    <a href="#">
      <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2">
    </a>
  </figure>
  <figure>
    <figcaption>Cute cat 3</figcaption>
    <a href="#">
      <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 3">
    </a>
  </figure>
  <!-- Add as many figures as you want here—they'll automatically arrange! -->
</div>

Why This Works #

• Scalable: Change calc(33.333% - 1rem) to calc(25% - 1rem) if you want 4 figures per row, or adjust the percentage for any number of items.
• Responsive: flex-wrap: wrap ensures figures move to new rows on smaller screens, and min-width: 200px keeps them usable on mobile.
• Clean Caption Placement: Using flex-direction: column on the figure lets us easily put the caption above the image without relying on the less flexible table-caption method.

Alternative: CSS Grid (For More Layout Control) #

If you prefer a two-dimensional layout system (great if you ever want to adjust rows and columns independently), CSS Grid is another excellent option:

Grid CSS #

.figure-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-creates columns based on screen size */
  gap: 1rem;
  max-width: 80%;
  margin: 0 auto;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

figcaption {
  margin-bottom: 0.5rem;
  text-align: center;
  font-weight: 500;
}

figure img {
  width: 100%;
  height: auto;
}

The HTML stays identical to the Flexbox version. Grid's repeat(auto-fit, minmax(200px, 1fr)) will automatically create as many columns as fit in the container, wrapping when space runs out.

Why Your Original Float Layout Failed #

Float was never intended for building complex grids. When you added the third figure with float:right, it couldn't fit in the same row because the first two floats took up most of the space—even if you adjusted the width, float doesn't handle spacing or responsive wrapping as smoothly as modern layout tools like Flexbox and Grid.

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