使用 float、inline-block 和 flex 可实现图文混排。float 让图片左/右浮动，文字环绕，需清除浮动；inline-block 将元素设为行内块，通过 vertical-align 控制对齐，避免脱离文档流；flex 是现代布局首选，父容器设为 display: flex，用 align-items 垂直对齐并用 gap 控制间距。注意设置 max-width: 100% 防溢出，保持响应式设计。初学者建议掌握 float 与 flex，适用于新闻列表、产品介绍等场景。
在CSS初级项目中，实现文本与图片的混排是常见的布局需求。掌握几种基础但实用的方法，能帮助你快速完成图文内容的排版，比如新闻列表、产品介绍等场景。
使用 float 实现图文混排
这是最传统也是最容易理解的方式。通过让图片浮动到左侧或右侧，文字内容会自动环绕在另一侧。
关键点：
给图片设置 float: left; 或 float: right; 控制图片与文字之间的间距，使用 margin 注意清除浮动，避免影响后续元素
示例代码：
立即学习“前端免费学习笔记（深入）”；
img {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
HTML结构中，图片紧跟在段落前，文字就会自然环绕。
使用 inline-block 布局
将图片和文字容器都设为 display: inline-block;，可以精确控制它们的垂直对齐方式。
优势： 不会产生浮动带来的布局脱离问题，适合简单的并列排版。
Revid AI
AI短视频生成平台
96 查看详情 
设置父容器为文本对齐方式，如 text-align: center; 使用 vertical-align 调整图片与文字的对齐（top, middle, bottom）
示例：
.container {
text-align: left;
}
.container img,
.container span {
display: inline-block;
vertical-align: middle;
}
使用 Flex 弹性布局（推荐）
现代网页布局首选方案，灵活且易于维护。通过 Flex 可轻松实现图片与文本在同一行对齐，并自适应空间分配。
给父容器设置 display: flex; 使用 align-items 控制垂直对齐 可配合 gap 添加间距
示例：
.flex-container {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
}
HTML中将图片和文字放在同一容器内即可，结构清晰，适配性强。
注意事项与技巧
无论使用哪种方式，都要注意以下几点：
图片设置最大宽度 max-width: 100%; 防止溢出 设置 height: auto; 保持比例 移动端考虑使用响应式单位如 rem 或百分比 避免过度嵌套，保持HTML语义清晰
基本上就这些。从 float 到 flex，选择合适的方法取决于项目复杂度和浏览器兼容要求。初学者建议先掌握 float 和 flex，能满足大多数图文混排需求。不复杂但容易忽略细节，多练习几次就能熟练应用。
以上就是css初级项目实战文本与图片混排方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1055756.html
微信扫一扫 
支付宝扫一扫 
