如何用纯HTML和CSS实现四张图片并排且下方带文本布局？

Got it, let's build that polished four-column layout with spaced images and accompanying text—just like you see on BBC's news sections. We'll use modern CSS Flexbox for reliable alignment and spacing, no extra frameworks needed.

HTML Structure #

First, wrap all your news items in a container to control the grid. We'll use semantic elements where possible for better accessibility:

<div class="news-grid">
  <div class="news-item">
    <img src="download.jpg" alt="News headline image" />
    <h2>Heading Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</p>
  </div>
  <div class="news-item">
    <img src="download2.jpg" alt="Another news image" />
    <h2>Second Heading</h2>
    <p>Nullam ac erat vel velit pulvinar aliquet. Donec euismod, nisl vitae aliquet tincidunt, neque nisi fermentum odio.</p>
  </div>
  <div class="news-item">
    <img src="download3.jpg" alt="Third news image" />
    <h2>Third Heading</h2>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
  <div class="news-item">
    <img src="download4.jpg" alt="Fourth news image" />
    <h2>Fourth Heading</h2>
    <p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis.</p>
  </div>
</div>

CSS Styling #

This handles the layout, spacing, and basic typography to match that clean BBC aesthetic:

/* Container for the entire grid */
.news-grid {
  display: flex;
  gap: 20px; /* Controls spacing between items—adjust to your preference */
  padding: 20px;
  max-width: 1200px; /* Optional: Limits width on large screens for better readability */
  margin: 0 auto; /* Centers the grid on the page */
}

/* Individual news item styling */
.news-item {
  flex: 1; /* Forces all items to be equal width */
  display: flex;
  flex-direction: column;
}

/* Image styling to maintain aspect ratio and fit the container */
.news-item img {
  width: 100%;
  height: auto; /* Prevents image distortion */
  border-radius: 4px; /* Optional: Adds subtle rounding like BBC's images */
  margin-bottom: 12px;
}

/* Heading and text styling */
.news-item h2 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  font-weight: bold;
  line-height: 1.3;
}

.news-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .news-grid {
    flex-direction: column; /* Stacks items vertically on mobile */
  }
}

Quick Explanations: #

• Flexbox Layout: display: flex on the container makes creating equal-width columns and managing spacing a breeze—no messy margin hacks needed with the gap property.
• Responsive Design: The media query stacks items vertically on mobile, which is critical for good user experience on smaller devices.
• Semantic HTML: Swapped <span> for <p> for paragraph text—this is better for accessibility and search engines.
• Image Care: height: auto ensures your images don't get stretched or distorted as the container size changes.

You can tweak the gap, padding, and font sizes to match BBC's exact styling—this is just a solid starting point!

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