使用 CSS Flexbox 实现两栏布局：图片、标题和描述分列左右

可以使用以下代码实现：

HTML 代码：

<div class='container'>
  <div class='left'>
    <a href='#'>
      <img src='image1.jpg' alt='Image 1'>
      <h3>文章标题 1</h3>
    </a>
    <p>文章描述 1</p>
  </div>
  <div class='right'>
    <a href='#'>
      <img src='image2.jpg' alt='Image 2'>
      <h3>文章标题 2</h3>
    </a>
    <p>文章描述 2</p>
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container a {
  text-decoration: none;
  color: black;
}

.container img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.container h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.container p {
  font-size: 14px;
}

.left, .right {
  width: 48%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

解释：

• 使用 flex 布局实现左右分居，并且让它们之间有间隔。
• 使用 a、img、h3 和 p 标签分别包含图片、文章标题和文章描述，并且让它们带有链接和样式。
• 使用 .left 和 .right 类名分别为左右两个容器设置样式，包括宽度、内边距、边框和圆角。