css制作图文混排原理
图文混排基础原理
图文混排主要通过CSS的float、display、flex或grid等属性实现。核心是控制文本与图片的相对位置关系，常见场景包括文字环绕图片、图文并排或交错布局。
使用float实现文字环绕
float属性让元素脱离文档流，使文本围绕其排列：
img {
float: left; /* 或right */
margin: 0 15px 15px 0; /* 添加边距避免贴边 */
}- 图片浮动后，相邻文本会自动环绕
- 需清除浮动避免影响后续内容：
clear: both
使用flexbox布局
Flexbox适合等分空间或对齐控制的混排：
.container {
display: flex;
align-items: center; /* 垂直居中 */
gap: 20px; /* 图片与文字间距 */
}
img {
flex: 0 0 200px; /* 固定图片宽度 */
}
.text {
flex: 1; /* 文字占剩余空间 */
}使用grid布局
Grid适合复杂的分栏混排：
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 图片固定宽，文字自适应 */
gap: 15px;
}处理间距与对齐
- 通过
margin/padding控制图文间距 - 使用
vertical-align调整行内元素对齐（如middle） object-fit: cover保持图片比例填充容器
响应式适配
添加媒体查询调整不同屏幕下的布局：
@media (max-width: 600px) {
.container {
flex-direction: column; /* 小屏幕改为纵向排列 */
}
img {
width: 100%; /* 图片宽度自适应 */
}
}图文混排常见问题
- 浮动元素可能导致父容器高度塌陷，需清除浮动
- 长文本可能绕过图片形成空白，可设置
shape-outside定义更复杂的环绕形状 - 移动端需注意图片尺寸避免溢出视口
