css制作图文混排原理

CSS图文混排的基本原理

图文混排主要通过CSS的float、flexbox、grid或position属性实现。核心是控制图片与文本的布局关系，使两者自然融合。

使用float属性实现

通过float: left或float: right让图片脱离文档流，文本环绕图片排列。需注意清除浮动以避免布局错乱。

img {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

使用flexbox布局

Flexbox适合更复杂的图文对齐需求。通过display: flex创建弹性容器，灵活控制子元素排列方式。

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

使用grid布局

CSS Grid适合精确控制图文位置。通过定义网格轨道实现复杂混排效果。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 15px;
}

使用object-fit控制图片比例

当图片尺寸不一致时，object-fit: cover或contain可保持比例统一。

img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

处理响应式布局

通过媒体查询调整不同屏幕尺寸下的图文排列方式。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

文字环绕形状

CSS Shapes Module允许文本围绕非矩形图片排列，需配合shape-outside属性使用。

img {
  float: left;
  shape-outside: circle(50%);
}

垂直对齐控制

使用vertical-align属性微调图片与文本的垂直对齐方式。

img {
  vertical-align: middle;
}