html怎么让图片和字分开

在HTML中，想要让图片和文字分开显示，我们可以使用多种方法，下面我将详细介绍几种常见的技巧，帮助大家实现这一目的。

我们可以利用HTML的布局标签来实现图片和文字的分离，比如使用<div>标签将图片和文字分别包裹起来，然后通过CSS样式来控制它们的布局。

方法一：使用<div>标签分离图片和文字

html怎么让图片和字分开

1、在HTML文件中，创建两个<div>标签，一个用于包裹图片，另一个用于包裹文字。

Markup

<div class="image-container">
  <img src="image.jpg" alt="示例图片">
</div>
<div class="text-container">
  这里是示例文字，与图片分离显示。
</div>

2、在CSS文件中，为这两个<div>标签设置样式。

CSS

.image-container {
  float: left; /* 图片靠左显示 */
  margin-right: 10px; /* 图片与文字间的距离 */
}
.text-container {
  margin-left: 110px; /* 文字与图片的距离，需大于图片宽度 */
}

方法二：使用CSS的Flex布局

1、使用Flex布局，可以更方便地实现图片和文字的分离，创建一个包裹图片和文字的父容器<div>。

Markup

<div class="container">
  <div class="image-container">
    <img src="image.jpg" alt="示例图片">
  </div>
  <div class="text-container">
    这里是示例文字，与图片分离显示。
  </div>
</div>

2、在CSS中，为父容器设置Flex布局。

CSS

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}
.image-container {
  margin-right: 10px; /* 图片与文字间的距离 */
}
.text-container {
  flex: 1; /* 文字占满剩余空间 */
}

方法三：使用CSS的Grid布局

1、如果你对Grid布局比较熟悉，也可以使用这种方法，创建一个包含图片和文字的容器。

Markup

<div class="container">
  <img src="image.jpg" alt="示例图片" class="image-container">
  <div class="text-container">
    这里是示例文字，与图片分离显示。
  </div>
</div>

2、在CSS中，为容器设置Grid布局。

CSS

.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片占自动宽度，文字占剩余空间 */
  grid-gap: 10px; /* 图片与文字间的距离 */
}
.image-container {
  grid-column: 1; /* 图片在第1列 */
}
.text-container {
  grid-column: 2; /* 文字在第2列 */
}