CSS如何设置图文混排样式 CSS float与flex两种实现方式-css教程-PHP中文网

CSS如何设置图文混排样式 CSS float与flex两种实现方式

爱谁谁

发布： 2025-07-23 10:56:01

原创

265人浏览过

css实现图文混排的方法有float、flex、inline-block和grid。1. float操作简单，但易导致高度塌陷，需清除浮动；2. flex布局灵活，对齐控制精准，适合现代网页设计；3. inline-block实现简单，但垂直对齐较复杂；4. grid布局功能强大，适合复杂图文排列，但学习成本较高。根据需求选择合适方案，简单环绕用float，精确控制用flex或grid，简单同行显示可用inline-block。

CSS如何设置图文混排样式 CSS float与flex两种实现方式

图文混排，说白了就是让文字环绕图片，或者让图片和文字在同一行内显示。CSS提供了多种方法来实现，各有优劣，选择哪种取决于你的具体需求和想要达到的效果。

float和flex是两种常见的选择，但还有一些其他方法，例如inline-block和grid。下面我会分别介绍这几种方式，并分析它们的适用场景。

解决方案

float方式，简单粗暴，但问题也多。Flex布局更现代，更灵活，但可能需要更多代码。

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

如何使用CSS float实现图文混排？

float是比较传统的做法，也比较简单。你可以直接给图片设置float: left或float: right，文字就会自动环绕图片。

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.image {
  float: left; /* 或者 float: right; */
  margin-right: 10px; /* 调整图片和文字之间的间距 */
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保证图片不变形 */
}

登录后复制

HTML结构：

<div class="container">
  <img class="image" src="your-image.jpg" alt="示例图片">
  <p>
    这是一段文字，将会环绕图片显示。 这是一段文字，将会环绕图片显示。
    这是一段文字，将会环绕图片显示。 这是一段文字，将会环绕图片显示。
    这是一段文字，将会环绕图片显示。 这是一段文字，将会环绕图片显示。
  </p>
</div>

登录后复制

float的缺点是容易引起父元素高度塌陷，需要清除浮动。清除浮动的方法有很多，比如使用overflow: auto或clearfix类。

clearfix方法：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.image {
  float: left; /* 或者 float: right; */
  margin-right: 10px; /* 调整图片和文字之间的间距 */
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保证图片不变形 */
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

登录后复制

如何使用CSS Flexbox实现图文混排？

Flex布局更适合需要更精确控制的场景。它可以很容易地实现图片和文字在同一行内垂直居中对齐。

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 10px;
}

.text {
  flex: 1; /* 让文字占据剩余空间 */
}

登录后复制

HTML结构：

<div class="container">
  <img class="image" src="your-image.jpg" alt="示例图片">
  <p class="text">
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
  </p>
</div>

登录后复制

Flex布局的优点是更容易控制对齐方式和元素之间的间距，而且不需要处理浮动问题。缺点是代码可能稍微多一些。

醒文

文字排版美化生图工具

查看详情

除了float和flex，还有哪些CSS方法可以实现图文混排？

除了float和flex，还有inline-block和grid。

inline-block:

将图片和文字都设置为display: inline-block;，然后调整vertical-align属性，可以实现简单的图文混排。

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.image {
  display: inline-block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  vertical-align: middle; /* 调整垂直对齐方式 */
  margin-right: 10px;
}

.text {
  display: inline-block;
  vertical-align: middle;
}

登录后复制

HTML结构：

<div class="container">
  <img class="image" src="your-image.jpg" alt="示例图片">
  <p class="text">
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
  </p>
</div>

登录后复制

inline-block的优点是简单，缺点是控制对齐方式可能比较麻烦。

grid:

Grid布局是更强大的布局方式，可以实现更复杂的图文混排效果。

.container {
  display: grid;
  grid-template-columns: 150px 1fr; /* 定义两列，第一列宽度150px，第二列占据剩余空间 */
  grid-gap: 10px; /* 设置列间距 */
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

登录后复制

HTML结构：

<div class="container">
  <img class="image" src="your-image.jpg" alt="示例图片">
  <p class="text">
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
    这是一段文字，将会和图片在同一行显示，并且垂直居中对齐。
  </p>
</div>

登录后复制

Grid布局的优点是灵活性非常高，可以实现各种复杂的布局。缺点是学习成本较高，需要掌握Grid布局的基本概念。

选择哪种方法，主要看你的具体需求。如果只是简单的文字环绕图片，float就足够了。如果需要更精确的控制，或者需要实现更复杂的布局，flex或grid会是更好的选择。

以上就是CSS如何设置图文混排样式 CSS float与flex两种实现方式的详细内容，更多请关注php中文网其它相关文章！