如何用css实现图片文字混排布局-css教程-PHP中文网

如何用css实现图片文字混排布局

P粉602998670

发布： 2025-10-24 18:05:01

原创

979人浏览过

使用float实现文字环绕图片；2. Flexbox实现图文并排对齐；3. Grid布局用于复杂结构；4. 注意响应式与图片适配，优先选用Flex或Grid。

如何用css实现图片文字混排布局

实现图片文字混排布局，主要依赖 CSS 的浮动、弹性布局（Flexbox）或网格布局（Grid）。以下是几种常用方法，适用于不同场景。

1. 使用 float 实现图文混排

这是传统方式，适合文字环绕图片的场景。

说明：

将图片设置为左浮动或右浮动，文字内容会自动环绕在另一侧。

示例代码：

HTML:
<img src="example.jpg" class="float-left">
<p>这里是环绕在图片周围的文字内容……</p>

CSS:
.float-left {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 150px;
  height: auto;
}

图片靠左，文字从右侧和下方环绕。使用 margin 增加间距，避免文字贴边。

立即学习“前端免费学习笔记（深入）”；

2. 使用 Flexbox 布局

适合结构清晰的图文并排，如新闻列表、产品项等。

说明：

通过弹性盒子让图片和文字在同一行对齐，并可灵活控制间距与垂直对齐。

静静设计网站后台管理界面模板

这是一款用于静静设计网站后台管理界面模板，也可以用于管理系统或其它通用后台界面。这款后台模板的宗旨是，页面基本没有过多的交互效果，简洁粗暴的同时带来的是界面加载速度的提升或操作便捷性的增加。2个css文件不超过20k，图标采用的是字体图标，图标素材都来自于icomoon网站，没有任何图片。页面整体采用扁平化处理，布局更趋向于暴露内容的本质，页面块之间的留白更多，字体更大，配色更单一，在form表单

403

查看详情

示例代码：

HTML:
<div class="flex-item">
<img src="example.jpg" class="flex-img">
<div class="flex-text">文字内容描述...</div>
</div>

CSS:
.flex-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.flex-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

图片与文字水平排列，align-items: flex-start 使顶部对齐，gap 控制间距。

3. 使用 Grid 布局

适合复杂图文结构，比如多图多段落混合排版。

说明：

通过网格划分区域，精确控制图片与文字的位置。

示例代码：

HTML:
<div class="grid-layout">
<img src="example.jpg" class="grid-img">
<p class="grid-text">这是一段描述文字...</p>
</div>

CSS:
.grid-layout {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 15px;
  align-items: start;
}

.grid-img {
  width: 100%;
  height: auto;
}

第一列放图片，第二列放文字，结构清晰且响应式友好。