如何让元素宽度取动态图片的33.33%而非父div宽度？

嘿，这问题我熟！你现在的核心问题是：段落的宽度是基于父div（默认占满容器宽度）的33.33%，而非图片的实际宽度。要实现跟着动态变化的图片走，我给你准备了两个实用方案，看你需要的兼容性来选：

方法一：纯CSS（现代浏览器推荐） #

这个方案不用写JS，靠CSS特性就能完美解决，简洁又靠谱：

<div style="position: relative; display: inline-block;">
  <img src="http://52.66.90.164/Show_barcode" style="display: block;">
  <div style="display: flex; gap: 0;">
    <p style="flex: 1;">Hello world my name is Rushabh Shah.</p>
    <p style="flex: 1;">Hello world my name is Rushabh Shah.</p>
    <p style="flex: 1;">Hello world my name is Rushabh Shah.</p>
  </div>
</div>

为什么这样有效？ #

• 把父div设为display: inline-block，它的宽度会自动贴合内部图片的实际宽度——不管图片加载后宽高怎么变，容器都会跟着调整。
• 用display: flex替代浮动，三个flex:1的段落会自动平分父容器的宽度（也就是图片的宽度），刚好实现33.33%的效果。
• 给图片加display: block是为了消除图片底部默认的空白间隙，避免布局错位。

方法二：JavaScript（兼容旧浏览器） #

如果需要支持不兼容flex的老浏览器，用JS动态调整宽度就很稳妥：

<div style="position: relative;" id="imgContainer">
  <img src="http://52.66.90.164/Show_barcode" id="barcodeImg">
  <div id="textWrap" style="position: absolute; top: 100%;">
    <p class="textPara">Hello world my name is Rushabh Shah.</p>
    <p class="textPara">Hello world my name is Rushabh Shah.</p>
    <p class="textPara">Hello world my name is Rushabh Shah.</p>
  </div>
</div>

<script>
const img = document.getElementById('barcodeImg');
const container = document.getElementById('imgContainer');
const paras = document.querySelectorAll('.textPara');

// 监听图片加载完成，确保拿到真实宽度
img.addEventListener('load', setParaWidth);
// 处理图片缓存的情况，避免代码不执行
if (img.complete) setParaWidth();

function setParaWidth() {
  const imgWidth = img.offsetWidth;
  // 让容器宽度和图片一致，防止段落超出图片范围
  container.style.width = `${imgWidth}px`;
  // 每个段落宽度设为图片的1/3
  paras.forEach(para => {
    para.style.width = `${imgWidth / 3}px`;
    para.style.float = 'left';
  });
}
</script>

关键细节： #

• 监听load事件是为了等图片完全加载后再获取宽度，避免拿到初始的0值。
• 检查img.complete是为了处理图片已经被浏览器缓存的情况，保证代码能正常执行。

小提醒：原代码的拼写错误 #

你原来的代码里有个笔误：stule应该是style，这个要记得修正哦！

内容的提问来源于stack exchange，提问作者shah rushabh