如何将新闻列表项的固定高度改为动态，统一适配最大内容项高度？

Hey there! To get all your news entries to match the height of the tallest one without relying on a fixed height, we’ll use modern CSS layout tools (Flexbox or Grid) since they natively handle equal-height containers. Here’s how to adjust your code step by step:

Step 1: Update the .article-3 CSS #

First, remove the fixed height: 335px property—it was forcing a static height no matter how much content each entry had. You can add an optional min-height if you want a baseline size for shorter entries, but it’s not required for equal heights.

Modified .article-3 code:

.article-3 {
  text-align: center;
  vertical-align: middle;
  background: #F7F7F7;
  max-width: 235px;
  /* Remove fixed height */
  min-height: 200px; /* Optional: Set a minimum height if needed */
  padding: 10px 20px; /* Shorthand for top/bottom and left/right padding */
  margin: 10px; /* Shorthand for equal margin on all sides */
  display: flex; /* Optional: Use this to align inner content vertically */
  flex-direction: column; /* Stack content inside the entry vertically */
}

Step 2: Set Up the Parent Container #

The key to equal heights is how you structure the parent element that wraps all your .article-3 entries. Pick either Flexbox or Grid below based on your layout needs:

Option A: Flexbox Parent #

Flexbox is ideal for row-based layouts and automatically stretches child items to match the tallest entry in their row:

.articles-container {
  display: flex;
  flex-wrap: wrap; /* Let entries wrap to new rows on smaller screens */
  gap: 10px; /* Optional: Replace margin on .article-3 for cleaner spacing */
}

If you use gap here, you can remove the margin:10px from .article-3 to avoid double spacing between items.

Option B: CSS Grid Parent #

Grid is perfect for structured, responsive layouts and also ensures all entries in a row share the same height:

.articles-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); /* Responsive columns that adjust to screen size */
  gap: 10px; /* Clean, consistent spacing between entries */
}

This setup creates columns that shrink and grow as needed, with every entry in a row matching the tallest one’s height.

Bonus: Align Inner Content to Push Elements to the Bottom #

If you want things like "Read More" buttons to stay at the bottom of each entry (even if some have shorter content), add a wrapper around your entry’s main content and use flex-grow:1:

.article-content {
  flex-grow: 1; /* Makes the content area fill all available space */
}

This will push any elements after the content wrapper (like buttons) to the bottom of the entry.

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