html实现 左图右文_div+css中,左边是图片,右边是文字怎么写

可以使用HTML中的`<div>`标签和CSS样式来实现左图右文的布局，具体实现方法如下：

HTML代码：

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="text">
    <h2>Heading</h2>
    <p>Text here...</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
}

.image {
  flex: 0 0 50%;
  max-width: 50%;
}

.text {
  flex: 1;
}

.image img {
  max-width: 100%;
  height: auto;
}

在上面的代码中，我们使用了`<div>`标签来分别包裹图片和文字。使用`display: flex`属性将容器设置为弹性盒子，使用`align-items: center`属性使得容器内的元素在纵向方向上垂直居中。使用`flex: 0 0 50%`属性使得图片占据容器宽度的50%，使用`flex: 1`属性使得文本占据剩余的宽度。

图片的CSS样式中，使用`max-width: 100%`属性使得图片可以自适应容器宽度，使用`height: auto`属性使得图片高度按比例自适应。

注意，以上代码只是实现了左图右文的基本布局，还需要根据实际需求进行样式的调整和优化。