CSS Flexbox布局：实现图片尺寸调整与行内排列的专业指南

.container {
  display: flex; /* 启用Flexbox布局 */
  /* 其他Flexbox属性，如justify-content, align-items等 */
}

/* 假设图片被包裹在 .imgBox 中 */
.container .box .imgBox img {
  width: 100%; /* 图片宽度与其父容器 .imgBox 保持一致 */
  height: auto; /* 保持图片原始纵横比 */
  display: block; /* 消除图片底部可能存在的额外空白 */
}

.container {
  display: flex;
  gap: 20px; /* 设置flex项目之间的水平间距 */
  flex-wrap: nowrap; /* 确保所有flex项目保持在单行，这是默认值但显式声明更清晰 */
}

<section id="Description" class="D">
  <div class="sub-description">
    <p>Hi, I'm My name here.</p>
    <p>
      As Software Engineer, I am a passionate Software Engineer, and I am
      skilled in HTML5, CSS3, JavaScript and React.
    </p>
  </div>
  <div class="container">
    <div class="box">
      <div class="imgBox">
        <img src="img/HTML5_Logo.png" alt="HTML5 Logo">
      </div>
      <h2>HTML5</h2>
      <p>Modern web structuring.</p>
    </div>
    <div class="box">
      <div class="imgBox">
        <img src="img/css3_Logo.png" alt="CSS3 Logo">
      </div>
      <h2>CSS3</h2>
      <p>Styling web pages.</p>
    </div>
    <div class="box">
      <div class="imgBox">
        <img src="img/Javascript_Logo.png" alt="JavaScript Logo">
      </div>
      <h2>JavaScript</h2>
      <p>Interactive web experiences.</p>
    </div>
  </div>
</section>

/* 基础样式，可根据项目需求调整 */
section {
  padding: 50px; /* 调整或移除，避免过大内边距 */
  margin: 0;
  box-sizing: border-box;
  font-family: 'montserrat', sans-serif;
}

/* Flexbox容器样式 */
.container {
  display: flex; /* 启用Flexbox布局 */
  gap: 20px; /* 设置图片盒子之间的间距 */
  flex-wrap: nowrap; /* 确保所有图片盒子保持在同一行 */
  justify-content: center; /* 可选：使图片盒子在容器中居中对齐 */
  align-items: flex-start; /* 可选：顶部对齐，防止内容高度不一时错位 */
  max-width: 1100px; /* 限制容器最大宽度，保持良好可读性 */
  margin: 0 auto; /* 容器居中 */
}

/* 单个图片盒子样式 */
.container .box {
  width: 300px; /* 设定每个图片盒子的固定宽度，内部图片将适应此宽度 */
  /* height: 400px; /* 可选：如果需要固定盒子高度 */
  flex-shrink: 0; /* 阻止flex项目在空间不足时缩小 */
  text-align: center; /* 文本内容居中 */
  border: 1px solid #eee; /* 示例边框 */
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease-in-out; /* 为后续悬停效果添加过渡 */
}

/* 图片容器样式 */
.container .box .imgBox {
  width: 100%; /* 确保图片盒子占据其父容器 .box 的全部宽度 */
  height: 180px; /* 示例：固定图片显示区域的高度 */
  overflow: hidden; /* 隐藏超出部分的图片内容 */
  margin-bottom: 10px;
}

/* 图片本身样式 */
.container .box .imgBox img {
  width: 100%; /* 图片宽度填充其父容器 .imgBox */
  height: 100%; /* 图片高度填充其父容器 .imgBox */
  object-fit: cover; /* 裁剪图片以填充容器，保持纵横比 */
  display: block; /* 移除图片底部可能存在的额外空白 */
}

/* 悬停效果示例 */
.container .box:hover {
  transform: translateY(-5px); /* 鼠标悬停时向上轻微移动 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}