本文介绍: CSS文字环绕图片图片左下角。常见的文字环绕图片图片在左上角或者右上角很好实现本文介绍图片如何左下角显示,且文本中也有图片(图片通过外链获取)。

常见的文字环绕图片,图片在左上角或者右上角很好实现
本文介绍图片如何左下角显示,且文本中也有图片(图片通过外链获取)。

示例

示例

图片左浮在左下角思路

左下角图片左浮动,在左下角图片标签之前创建一个同样左浮动的块设置该块的高度,将图片“顶”下去。

核心代码

<div class="width">
  <div class="textBox">
    <div class="imgBox1">
      <img src="./img/1.png" alt="" width="512px" height="512px">
    </div&gt;
    <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, &amp;quot;SF UI Text&amp;quot;, Arial, &amp;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

原文地址:https://blog.csdn.net/weixin_48658667/article/details/128865740

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_20158.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注