如何获得图像推送的文本的宽度?

时间:2019-05-16 17:51:36

标签: javascript width

有时网站会以这样一种方式来设置其文章:关联的图像不会放置在文章文字的上方,而是放在左上方,文字在右侧。

Example Article with text pushed

在上面的屏幕截图中,图片被放置在文章中,但是<p>标签的宽度仍然等于父div的长度。 我希望能够计算出第一个<p>的文字由于添加的图像而没有被压缩的情况。

我尝试了多种方法来计算width,包括.offsetWidth.getBoundingClientRect().width,并且每次返回相同的 560

我不确定在SO或Google上还有哪些其他搜索方式。 我还应注意,我无法控制页面上的实际内容。页面加载后,我只是动态地处理内容。

我在此页面上添加了如何设置的摘要(同样,我无法控制源代码)。

.lead-img {text-align: center;}

 img.alignleft{
  float: left;
  margin: 0 25px 5px 0;
  padding: 0 0 15px;
 }
    <div class="lead-img">
      <img class="alignleft " style="background-color:lightgreen;height:250px;width:250px;">
     </div>
    <div>
      <span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
      <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p>
      <p>ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      </span>
    </div>

0 个答案:

没有答案