css制作图文混排原理

CSS 图文混排原理

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

使用 float 属性

通过 float 让图片脱离文档流，使文本环绕图片排列。图片可以设置为左浮动或右浮动。

img {
  float: left; /* 或 right */
  margin: 0 15px 15px 0; /* 控制图片与文本间距 */
}

使用 flexbox 布局

Flexbox 可以更灵活地控制图文对齐方式。将容器设为 display: flex，通过 align-items 调整垂直对齐。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 20px; /* 图文间距 */
}

使用 grid 布局

Grid 适合复杂混排场景，通过定义网格区域分配图文位置。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 图片与文本宽度比例 */
  gap: 15px;
}

使用 position 定位

绝对定位可精确控制图片位置，但需手动调整文本间距避免重叠。

img {
  position: absolute;
  top: 10px;
  left: 10px;
}
.text {
  margin-left: 120px; /* 为图片留出空间 */
}

处理响应式布局

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

@media (max-width: 768px) {
  img {
    float: none;
    display: block;
    margin: 0 auto 15px;
  }
}

注意事项

• 浮动布局需清除浮动（clearfix）防止父容器高度塌陷。
• Flexbox/Grid 对旧浏览器兼容性较差，需添加前缀。
• 始终为图片设置 max-width: 100% 避免溢出容器。