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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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;">
            你好! 这是你第一次使用&nbsp;<span
              style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span>&nbsp;所展示的欢迎页。如果你想学习如何使用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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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;">
            你好! 这是你第一次使用&nbsp;<span
              style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span>&nbsp;所展示的欢迎页。如果你想学习如何使用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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=560&amp;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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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;">
            你好! 这是你第一次使用&nbsp;<span
              style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span>&nbsp;所展示的欢迎页。如果你想学习如何使用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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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;">
            你好! 这是你第一次使用&nbsp;<span
              style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span>&nbsp;所展示的欢迎页。如果你想学习如何使用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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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;">
            你好! 这是你第一次使用&nbsp;<span
              style="box-sizing: border-box; font-weight: 700;">Markdown编辑器</span>&nbsp;所展示的欢迎页。如果你想学习如何使用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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, 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
1.png

2.png
2.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值