html前端左图右文布局源代码

以下是一个简单的左图右文布局的HTML和CSS代码示例：

HTML代码：

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="图像">
  </div>
  <div class="content">
    <h2>标题</h2>
    <p>内容</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.image {
  flex: 1;
  margin-right: 20px;
}

.content {
  flex: 2;
}

h2 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

这个布局使用了flexbox布局，其中`.container`是一个包含图像和内容的容器。`.image`和`.content`分别是图像和内容的容器，`.image`使用了`flex: 1`属性，使其在横向方向上占据了1/3的空间，`.content`使用了`flex: 2`属性，使其在横向方向上占据了2/3的空间。`align-items`和`justify-content`属性用于水平和垂直居中对齐。