使用CSS浮动结合媒体查询可实现图文列表响应式布局。1. 基础结构由图片和文字组成，通过float使图片左浮、文字环绕；2. 为.media-content设置overflow:hidden触发BFC，防止文字环绕异常；3. 在屏幕小于768px时，取消浮动，图片居中，文字下移，形成垂直布局；4. 设置图片max-width:100%，实现自适应缩放。该方案兼容旧浏览器，适用于轻量级项目。
使用CSS浮动（float）结合媒体查询（Media Queries）可以创建简洁高效的图文列表响应式布局。虽然现代布局更多采用Flexbox或Grid，但在兼容旧浏览器或轻量项目中，float仍具实用价值。
图文列表通常由图片和文字内容组成，结构清晰是响应式的基础：
<div class="media-list">
<div class="media-item">
<img src="image1.jpg" alt="图1" class="media-img">
<div class="media-content">
<h3>标题一</h3>
<p>这是一段描述文字，说明图片相关内容。</p>
</div>
</div>
<!-- 更多 media-item -->
</div>
通过float让图片左浮，文字环绕其右侧，形成经典的图文混排：
.media-item {
margin-bottom: 20px;
overflow: hidden; /* 清除浮动 */
}
.media-img {
float: left;
width: 120px;
height: 120px;
margin-right: 15px;
object-fit: cover;
}
.media-content {
overflow: hidden; /* 形成BFC，防止文字环绕异常 */
}
.media-content h3 {
margin: 0 0 10px;
}
关键点：给 .media-content 设置 overflow: hidden 可触发BFC，避免文字被其他浮动元素影响，同时实现自适应布局。
立即学习“前端免费学习笔记（深入）”；
在小屏幕下，将图片宽度缩小或改为上下排列，提升可读性：
@media (max-width: 768px) {
.media-item {
text-align: center;
}
.media-img {
float: none;
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
}
.media-content {
overflow: visible;
padding: 0;
}
}
说明：当屏幕小于768px时，取消浮动，图片居中显示，文字在其下方，形成垂直堆叠布局，更适合手机阅读。
确保图片在不同设备上清晰且不溢出容器：
.media-img {
max-width: 100%;
height: auto;
display: block;
}
配合父容器的宽度控制，实现图片自适应缩放。
基本上就这些。float虽老，但搭配media queries依然能快速实现图文列表的响应式效果，适合简单项目或需要兼容IE8/9的场景。掌握清除浮动与断点切换布局，就能灵活应对多数需求。
以上就是CSS浮动如何制作图文列表响应式布局_float与media queries结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
647
收藏
