HTML/CSS博客帖子元素对齐问题求助

你需要实现的目标布局：

当前你的实现效果：

下面是修复后的完整代码及关键修改说明：

修复后的HTML代码 #

<div class="blog-container" id="blogContainer">
  <!-- Example Blog Post -->
  <div class="blog-post" data-date="2024-08-30" onclick="" style="cursor: pointer;">
    <div class="blog-thumbnail">
      <img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
    </div>
    <div class="blog-content">
      <h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
      <p class="blog-date">August 30, 2024</p>
      <p class="blog-excerpt">Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
      <a href="" class="read-more">Read more</a>
    </div>
  </div>
</div>

修复后的CSS代码 #

body {
  margin: 0;
  font-family: "Bai Jamjuree", sans-serif;
}

/* Style for Blog Container */
.blog-container {
  width: 1240px;
  max-width: 94%;
  margin: 0 auto 100px;
  padding: 5px 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.blog-post {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  margin: 20px 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-thumbnail img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.blog-content {
  flex: 1;
}

.blog-content h2 {
  font-size: 1.4em;
  margin: 0 0 10px;
  color: #333;
}

.blog-date {
  font-size: 0.9em;
  color: #999;
  margin: 0 0 15px;
}

.blog-excerpt {
  font-size: 1em;
  color: #666;
  margin: 0 0 20px;
  line-height: 1.5;
}

.read-more {
  color: #1e7cd6;
  text-decoration: none;
  font-weight: bold;
}

.read-more:hover {
  color: #104e8b;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .blog-post {
    flex-direction: column;
  }
  .blog-thumbnail img {
    width: 100%;
    height: auto;
  }
}

/* Font Weight Classes */
.bai-jamjuree-extralight { font-family: "Bai Jamjuree", sans-serif; font-weight: 200; font-style: normal; }
.bai-jamjuree-light { font-family: "Bai Jamjuree", sans-serif; font-weight: 300; font-style: normal; }
.bai-jamjuree-regular { font-family: "Bai Jamjuree", sans-serif; font-weight: 400; font-style: normal; }
.bai-jamjuree-medium { font-family: "Bai Jamjuree", sans-serif; font-weight: 500; font-style: normal; }
.bai-jamjuree-semibold { font-family: "Bai Jamjuree", sans-serif; font-weight: 600; font-style: normal; }
.bai-jamjuree-bold { font-family: "Bai Jamjuree", sans-serif; font-weight: 700; font-style: normal; }
.bai-jamjuree-extralight-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 200; font-style: italic; }
.bai-jamjuree-light-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 300; font-style: italic; }
.bai-jamjuree-regular-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 400; font-style: italic; }
.bai-jamjuree-medium-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 500; font-style: italic; }
.bai-jamjuree-semibold-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 600; font-style: italic; }
.bai-jamjuree-bold-italic { font-family: "Bai Jamjuree", sans-serif; font-weight: 700; font-style: italic; }

a { text-decoration: none; }
a.fill-div { display: block; height: 100%; width: 100%; text-decoration: none; }

关键修改点 #

• 合并重复定义的.blog-post样式，保留flex布局并设置align-items: flex-start，避免文本与图片垂直居中导致的排版错乱
• 新增.blog-content容器包裹所有文本内容，让flex自动分配图片与文本区域的空间
• 给日期、摘要添加独立类名，分别设置样式，避免统一p标签样式的干扰
• 调整各元素margin值，修正过大间距问题
• 修复CSS末尾语法错误（括号不匹配）
• 优化响应式布局，小屏幕下将flex方向改为垂直排列，图片宽度自适应

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