如何使用 Flex 布局优雅地布局带图片的段落？

如何优雅地布局带图片的段落？

当我们遇到需要在段落中放置图片的情况时，为了实现美观布局，我们可以考虑以下技巧：

解决方案：

1. 大盒子采用 flex 布局：将包含图片和文本的容器作为 flex 容器。

2. 包裹图片的小盒子：创建一个包裹图片的子盒子，并添加以下样式：

   • flex-shrink: 0; 禁止收缩
   • flex-grow: 0; 禁止拉伸
   • margin-left: 负值; 调整图片与文本对齐

这样，小盒子将根据图片大小固定宽度，并且文本可以灵活地填充可用空间，而图片将始终保持与其原始大小一致。

示例代码：

<div class="container">
  <div class="image-wrapper">
    @@##@@
  </div>
  <p>这是一个带图片的段落...</p>
</div>

.container {
  display: flex;
}

.image-wrapper {
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: -20px;
}

以上就是如何使用 Flex 布局优雅地布局带图片的段落？的详细内容，更多请关注其它相关文章！