请求协助实现4组一一对应图文并排布局及CSS样式完善

Hey there! Let's get your 4 text-image pairs set up so each text sits right next to its matching image. I'll build on the CSS you provided, fix a small syntax issue, and add the HTML structure and styling needed for the layout you want.

HTML Structure #

First, wrap each text-image pair in a container to keep them grouped—this makes it easy to control their layout together:

<div class="content-container">
  <!-- Pair 1 -->
  <div class="content-item">
    <div class="text">
      Your first text content goes here. You can add paragraphs, emphasized text like *this*, or even code snippets like `example()` inside this block.
    </div>
    <img src="your-first-image-url" alt="Description for first image">
  </div>

  <!-- Pair 2 -->
  <div class="content-item">
    <div class="text">
      Your second text content is right here. Feel free to customize the styling later to match your brand or design preferences.
    </div>
    <img src="your-second-image-url" alt="Description for second image">
  </div>

  <!-- Pair 3 -->
  <div class="content-item">
    <div class="text">
      Third section text goes here. Keep each text block focused to pair well with its corresponding image.
    </div>
    <img src="your-third-image-url" alt="Description for third image">
  </div>

  <!-- Pair 4 -->
  <div class="content-item">
    <div class="text">
      Fourth text content completes your set. You can adjust spacing, sizing, and colors as needed using the CSS below.
    </div>
    <img src="your-fourth-image-url" alt="Description for fourth image">
  </div>
</div>

Updated CSS #

I fixed a missing semicolon in your original body style, added styling for the content pairs, and polished the text layout. Flexbox is perfect here to keep text and images tightly aligned:

body {
  background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg); /* Fixed missing semicolon */
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh; /* Ensures body covers full viewport height */
  margin: 0;
  padding: 2rem;
  box-sizing: border-box;
}

/* Container for all pairs - centers content and adds spacing */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem; /* Space between each text-image pair */
}

/* Individual text-image pair - uses flex to keep them adjacent */
.content-item {
  display: flex;
  align-items: center;
  gap: 2rem; /* Space between text and image */
  background: rgba(255, 255, 255, 0.8); /* Optional: semi-transparent background for readability */
  padding: 2rem;
  border-radius: 8px;
}

/* Text block styling - adjust width and appearance as needed */
.text {
  flex: 1; /* Lets text take available space */
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}

/* Image styling - ensures images don't overflow */
.content-item img {
  max-width: 300px;
  max-height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
  .content-item {
    flex-direction: column; /* Switches to vertical layout on mobile */
    text-align: center;
  }
}

Quick Tips: #

• Layout Control: Change flex-direction in .content-item from row (default) to column if you want text above/below the image instead of side-by-side.
• Readability: The semi-transparent white background on .content-item helps text stand out against your fixed background image—tweak the rgba values to match your design.
• Image Paths: Replace your-first-image-url etc. with your actual image URLs or local file paths.
• Semicolon Fix: Your original body CSS was missing a semicolon after background-image, which could have broken the rest of the styles. I added that for you.

Hope this gets your layout working perfectly! 😊

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