HTML/CSS <p>图像的宽度

Question

我正在开发一个将图像放在div中的网站,图像下方是一个<p>带有一些文本的标记.图片可以是150px宽或200px宽,但<p>标签不应该比图像宽,因为它会弄乱布局.所以我不知道该怎么做,图像的宽度是动态的,所以我不能在任何地方放宽度,所以我可能不得不求助于javascript来获取图像的宽度并将宽度放在<p>标签上但javascript并不是我的强项,所以我希望有一个简单的css解决方案.

这里有一些代码,所以你们可以看看它的外观.

<li>
    <div class="container_movie">
        <img src="images/category/movie/super-8-cover.jpg"/>
        <p> super8<br/>
        22-07-’11 <span class="day_countdown">// 11 days</span></p>
    </div>
</li>

我也知道代码还不完美,我还在测试很多.

Answer 1

如果你决定使用 javascript，你可以使用类似这样的东西（代码非常丑陋，它只是为了说明这个想法）：

<script>
    function onImgLoad (img) {
        img.parentNode.lastChild.style.width = img.width + 'px';
    }
</script>
<div class="container_movie">
        <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQZLVgU_LoiQ7VDF6UQSqUWTN-ZqL2FWnBThQgL6F0G5803L-nR" onLoad="onImgLoad(this)"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices vulputate pretium. In sagittis faucibus justo, ac dignissim erat feugiat eu. </p></div>