html如何做到左边图右边文字

在HTML中，通常可以使用`<div>`元素及其相关的CSS样式来实现左侧图片和右侧文字的布局。这通常是通过浮动（float）、网格（grid）或 flexbox 这三种常见的布局技术之一来完成的。以下是基本步骤：

1. **浮动（Float）**:
使用`<img>`标签插入图片，并设置`float`属性为`left`使其向左浮动，然后在其旁边添加另一个`<div>`，用于放置文字内容。将这个`<div>`设置为清除浮动，比如使用`clear:both`。

<div style="float:left; width:200px;">
  <img src="image.jpg" alt="图片">
</div>
<div style="clear:both;">文字描述...</div>

2. **Grid布局**:
如果你熟悉 CSS Grid，可以用两个列来创建这种布局，第一列放图片，第二列放文本。

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
  <p>文字描述...</p>
</div>

3. **Flexbox布局**:
对于灵活的单行布局，可以使用`display:flex`和`flex-wrap: wrap`:

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.img-container {
  flex: 0 0 200px;
}
.text-container {
  margin-left: 200px;
}
</style>

<div class="container">
  <div class="img-container"><img src="image.jpg" alt="图片"></div>
  <div class="text-container">文字描述...</div>
</div>