Question

我正在尝试将下面的.copy缩小到图像的宽度：

HTML:
<div class="post">
  <img src="some/image.png" />
  <div class="copy">
    <p>Morbi dignissim leo a erat tristique eu faucibus dolor commodo. Cras scelerisque, est quis molestie tempus, ante sem fringilla ante, non convallis quam mi ac metus. Donec rhoncus mattis consectetur. Maecenas cursus, dolor ut facilisis consequat, dolor quam interdum quam, vel lacinia arcu neque vel erat.</p>
  </div>
</div>

CSS:
.post {
  float: right;
}

.post浮动，收缩包装到其内容的宽度。如果没有多少.copy，这会有效，但当.copy变长时会扩展.post。有没有办法让.copy保持图像的宽度？

不幸的是，图像宽度会根据页面宽度而变化，因此我无法设置实际尺寸。我只想让图像定义.post宽度本身。

有没有办法在不使用javascript的情况下执行此操作？

Answer 1

为您的图片提供ID：

<img id="img1" src="some/image.png" />

给你的p元素一个id，我称之为'detail'

<script type="text/javascript">
    var img1 = document.getElementById('img1');
    imgWidth = img1.width;
    document.getElementById('details').style.width=imgWidth;
</script>

更新：

<div class="post">
  <div class="container">
    <img src="some/image.png" />
    <div class="copy">
    <p>Morbi dignissim leo a erat tristique eu faucibus dolor commodo. Cras scelerisque, est quis molestie tempus, ante sem fringilla ante, non convallis quam mi ac metus. Donec rhoncus mattis consectetur. Maecenas cursus, dolor ut facilisis consequat, dolor quam interdum quam, vel lacinia arcu neque vel erat.</p>
  </div>
</div>

Answer 2

我想不出有任何办法可以做到这一点。但是，即使您的图像是动态的，您也可以从服务器端（例如PHP）或even from Javascript获取其大小。然后，您可以将宽度添加到div.post元素，以将所有内容保持在该宽度内。

获取<p>文本以适应收缩包装的包装</p>

2 个答案: