CSS文字环绕图片，图片在左下角
常见的文字环绕图片，图片在左上角或者右上角很好实现。 本文介绍图片如何在左下角显示，且文本中也有图片（图片通过外链获取）。
示例
图片左浮在左下角思路
左下角图片左浮动，在左下角图片标签之前创建一个同样左浮动的块，设置该块的高度，将图片“顶”下去。
核心代码：
<div class="width">
<div class="textBox">
<div class="imgBox1">
<img src="./img/1.png" alt="" width="512px" height="512px">
</div>
<div id="empty" style="float:left;width:1px;height: 512px;"></div>
<div class="imgBox2">
<img src="./img/2.png" alt="" width="512px" height="512px">
</div>
<div id="txt">文本...</div>
</div>
</div>
<style>
.width {
height: 100%;
width: 90%;
margin: 0 auto;
}
.textBox .imgBox1 {
float: right;
margin: 0 0 10px 10px;
}
.textBox .imgBox2 {
float: left;
clear: left;
margin-right: 10px;
}
.textBox #txt {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #666666;
}
</style>
效果：
优化：根据文本高度，自动设置高度
通常情况下图片的位置是固定的，文本是动态插入的，此时文本高度就变得不固定了，就需要通过脚本获取文本高度再减去左下角图片高度。
核心代码：
<script>
$(function () {
function addEmptyHeight() {
// 获取文本高度
let height = $("#txt").height();
let top = height < 512 ? 0 : 512;
// 给左浮动的块设置高度将左下角的图片“顶”下去
$("#empty").css("height", height - top + "px");
}
addEmptyHeight();
</script>
效果同上
处理文本中包含图片（图片通过外链获取）
当文本中有图片，图片通过外链获取时，此时该图片的加载顺序将会影响文本高度。（当DOM结构渲染好之后，图片可能还未完全加载成功，此时会执行jQuery，将浮动的块的高度提前设置。）
解决思路： 通过脚本获取到文本中的所有图片，为每一个图片都添加一个定时器，当图片加载完成后再执行设置浮动的块高度的代码，最后清除定时器。
核心代码：
<script>
$(function () {
function addEmptyHeight() {
let height = $("#txt").height();
let top = height < 512 ? 0 : 512;
$("#empty").css("height", height - top + "px");
}
const imgNodes = document.querySelectorAll('#txt img') || [];
let imgArr = imgNodes instanceof HTMLImageElement ? [imgNodes] : [...imgNodes]; // 将NodeList类数组对象转Array，Array才有forEach方法
if (imgArr.length === 0) {
addEmptyHeight();
} else {
// 文本里面有图片则需要等待里面所有图片加载完成后再添加高度
imgArr.forEach(img => {
let timer = setInterval(() => {
if (img.complete) { // 图片加载完成后执行
addEmptyHeight();
// 图片加载完成后清除定时器
clearInterval(timer);
}
}, 50);
});
}
})
</script>
效果：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文字环绕图片，图片在左下角</title>
<script src="../js/jQuery3.6.0.js" type="text/javascript"></script>
<style>
.width {
height: 100%;
width: 90%;
margin: 0 auto;
}
.textBox .imgBox1 {
float: right;
margin: 0 0 10px 10px;
}
.textBox .imgBox2 {
float: left;
clear: left;
margin-right: 10px;
}
.textBox #txt {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #666666;
}
</style>
</head>
<body>
<div class="width">
<div class="textBox">
<div class="imgBox1">
<img src="./img/1.png" alt="" width="512px" height="512px">
</div>
<div id="empty" style="float:left;width:1px;"></div>
<div class="imgBox2">
<img src="./img/2.png" alt="" width="512px" height="512px">
</div>
<div id="txt">
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h1
style="box-sizing: border-box; font-size: 24px; margin: 8px 0px 16px; line-height: 32px; color: rgb(79, 79, 79);">
欢迎使用Markdown编辑器
</h1>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
你好！ 这是你第一次使用 <span
style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h2
style="box-sizing: border-box; margin: 8px 0px 16px; line-height: 30px; color: rgb(79, 79, 79); font-size: 22px;">
<a style="box-sizing: border-box; background-color: transparent; color: rgb(78, 161, 219);"></a>新的改变
</h2>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h1
style="box-sizing: border-box; font-size: 24px; margin: 8px 0px 16px; line-height: 32px; color: rgb(79, 79, 79);">
欢迎使用Markdown编辑器
</h1>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
你好！ 这是你第一次使用 <span
style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h2
style="box-sizing: border-box; margin: 8px 0px 16px; line-height: 30px; color: rgb(79, 79, 79); font-size: 22px;">
<a style="box-sizing: border-box; background-color: transparent; color: rgb(78, 161, 219);"></a>新的改变
</h2>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
</p>
</div>
<!-- 具有外链的图片 -->
<img
src="https://img2.baidu.com/it/u=279556825,1255271262&fm=253&fmt=auto&app=138&f=JPEG?w=560&h=500"
width="700">
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h1
style="box-sizing: border-box; font-size: 24px; margin: 8px 0px 16px; line-height: 32px; color: rgb(79, 79, 79);">
欢迎使用Markdown编辑器
</h1>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
你好！ 这是你第一次使用 <span
style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h2
style="box-sizing: border-box; margin: 8px 0px 16px; line-height: 30px; color: rgb(79, 79, 79); font-size: 22px;">
<a style="box-sizing: border-box; background-color: transparent; color: rgb(78, 161, 219);"></a>新的改变
</h2>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h1
style="box-sizing: border-box; font-size: 24px; margin: 8px 0px 16px; line-height: 32px; color: rgb(79, 79, 79);">
欢迎使用Markdown编辑器
</h1>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
你好！ 这是你第一次使用 <span
style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h2
style="box-sizing: border-box; margin: 8px 0px 16px; line-height: 30px; color: rgb(79, 79, 79); font-size: 22px;">
<a style="box-sizing: border-box; background-color: transparent; color: rgb(78, 161, 219);"></a>新的改变
</h2>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h1
style="box-sizing: border-box; font-size: 24px; margin: 8px 0px 16px; line-height: 32px; color: rgb(79, 79, 79);">
欢迎使用Markdown编辑器
</h1>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
你好！ 这是你第一次使用 <span
style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span> 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
</p>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<h2
style="box-sizing: border-box; margin: 8px 0px 16px; line-height: 30px; color: rgb(79, 79, 79); font-size: 22px;">
<a style="box-sizing: border-box; background-color: transparent; color: rgb(78, 161, 219);"></a>新的改变
</h2>
</div>
<div class="cl-preview-section"
style="box-sizing: border-box; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">
<p
style="box-sizing: border-box; margin-top: 0px; margin-bottom: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden;">
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
</p>
</div>
</div>
</div>
</div>
<script>
$(function () {
function addEmptyHeight() {
// 获取文本高度
let height = $("#txt").height();
let top = height < 512 ? 0 : 512;
// 给左浮动的块设置高度将左下角的图片“顶”下去
$("#empty").css("height", height - top + "px");
}
const imgNodes = document.querySelectorAll('#txt img') || [];
let imgArr = imgNodes instanceof HTMLImageElement ? [imgNodes] : [...imgNodes]; // 将NodeList类数组对象转Array，Array才有forEach方法
if (imgArr.length === 0) {
addEmptyHeight();
} else {
// 详情里面有图片则需要等待里面所有图片加载完成后再添加高度
imgArr.forEach(img => {
let timer = setInterval(() => {
if (img.complete) { // 图片加载完成后执行
addEmptyHeight();
// 图片加载完成后清除定时器
clearInterval(timer);
}
}, 50);
});
}
})
</script>
</body>
</html>
图片素材
1.png
2.png
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
