在网页开发场景中，图片与文字的混排布局非常普遍，比如文章配图、商品卡片展示、资讯列表等模块都需要这类效果。而响应式设计要求布局能适配从手机到桌面端的各种屏幕尺寸，因此需要掌握对应的CSS实现方法。
基础浮动实现方法
浮动是早期的布局方案，适合简单的图文混排场景，核心是通过float属性让图片脱离文档流，文字围绕图片排列。
实现逻辑如下：
/* 容器基础样式 */
.img-text-wrap {
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-bottom: 20px;
}
/* 图片浮动设置 */
.img-text-wrap .float-img {
float: left; /* 图片靠左浮动，文字在右侧环绕 */
width: 200px;
height: auto; /* 保持图片比例，避免变形 */
margin-right: 16px;
margin-bottom: 8px;
}
/* 清除浮动，避免影响后续元素 */
.img-text-wrap::after {
content: "";
display: block;
clear: both;
}
/* 响应式适配：小屏下图片占满宽度 */
@media (max-width: 768px) {
.img-text-wrap .float-img {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 12px;
}
}
对应的HTML结构为：
<div class="img-text-wrap">
<img src="https://ipipp.com/sample-img.jpg" class="float-img" alt="示例图片">
<p class="text-content">这里是混排的文字内容，当图片设置左浮动后，这段文字会围绕在图片的右侧排列。如果文字内容较多，会自动换行到图片下方，适配不同长度的文本场景。</p>
</div>
flexbox弹性布局方案
flexbox是现代布局的常用方案，控制能力更强，能更灵活地调整图文的对齐方式和排列顺序，适配性更好。
实现响应式图文混排的核心CSS代码如下：
.flex-wrap {
display: flex;
align-items: flex-start; /* 顶部对齐，也可根据需求改为center等 */
gap: 16px; /* 图文之间的间距 */
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-bottom: 20px;
}
.flex-wrap .flex-img {
width: 240px;
height: auto;
flex-shrink: 0; /* 防止图片被压缩 */
}
.flex-wrap .flex-text {
flex: 1; /* 文字区域占剩余空间 */
line-height: 1.6;
}
/* 小屏下垂直排列 */
@media (max-width: 768px) {
.flex-wrap {
flex-direction: column;
}
.flex-wrap .flex-img {
width: 100%;
}
}
这种方案的优势是可以轻松调整图文的对齐方式，比如设置align-items: center让图文垂直居中对齐，也可以通过order属性调整图文的出现顺序，不需要修改HTML结构。
grid网格布局方案
grid布局适合更复杂的图文混排场景，比如多图与文字的组合、不规则排列的布局，控制精度更高。
单组图文混排的实现代码如下：
.grid-wrap {
display: grid;
/* 定义两列，第一列放图片，第二列放文字，图片列宽度自适应内容 */
grid-template-columns: auto 1fr;
gap: 16px;
align-items: start;
padding: 16px;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin-bottom: 20px;
}
.grid-wrap .grid-img {
width: 200px;
height: auto;
}
.grid-wrap .grid-text {
line-height: 1.6;
}
/* 小屏下改为单行排列 */
@media (max-width: 768px) {
.grid-wrap {
grid-template-columns: 1fr;
}
.grid-wrap .grid-img {
width: 100%;
}
}
注意事项
- 图片需要设置
height: auto，避免强制设置高度导致图片拉伸变形，影响展示效果。 - 响应式断点可以根据实际需求调整，通常768px是平板和手机的分界点，也可以根据设计稿的要求设置。
- 如果文字内容较短，flexbox和grid方案可以设置
align-items: center让图文垂直居中，视觉上更协调。 - 避免使用固定像素设置文字大小，推荐使用
rem或者em单位，配合响应式调整根字体大小，提升整体的适配性。
不同的布局方案适用场景不同，简单的环绕效果可以用浮动，需要灵活控制对齐和顺序用flexbox，复杂的不规则布局用grid，开发者可以根据实际需求选择。