一、并排布局

1.1 使用display: inline-block;

.image-and-text {
  display: inline-block;
  margin-right: 10px; /* 图片与文字之间的间距 */
}

1.2 对齐方式

.image-and-text .text {
  vertical-align: middle; /* 使文字垂直居中 */
}

二、层叠布局

2.1 使用position: absolute;

.image-over-text {
  position: absolute;
  top: 0;
  left: 0;
}

2.2 使用z-index

z-index属性用于控制元素的堆叠顺序。值越大，元素越在上面。

.text {
  z-index: 1; /* 文字在图片下方 */
}

三、环绕布局

3.1 使用float

.text {
  float: left; /* 文字浮动在左侧 */
  margin-right: 20px; /* 图片与文字之间的间距 */
}

3.2 清除浮动

为了避免浮动引起的布局问题，可以使用clear属性。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

四、响应式布局

4.1 使用媒体查询

@media (max-width: 600px) {
  .image-and-text {
    display: block; /* 在小屏幕上改为块级布局 */
  }
}

4.2 响应式单位

使用相对单位如vw（视口宽度）、vh（视口高度）和rem（根字体大小）可以使布局更加灵活。

.image {
  width: 50vw; /* 图片宽度为视口宽度的50% */
}