Question

我希望页面调整图像周围的div的宽度，并在其下面放置一个小文本，这样文本就会被强制换行以便不超过图像的宽度。拇指的宽度因拇指而异。在下面的代码中，我用“???”确定了未知宽度。

<div id="N-03-item" style="float:left; width: ???;">
  <p><a href="item.php?i=8">
  <img id="N-03" src="photos/thumbs/8.jpg" alt='Choker Necklace 18"'/><br/>
  Frosted Flower Choker Necklace 18"</a></p>
</div>

我认为这是javascript需要发生的事情（虽然CSS解决方案也会很好），但javascript不是我的力量。根据DOM报告每个实例中的图像宽度，每次生成的div宽度需要不同。

有人可以告诉我适当的javascript会是什么吗？

Answer 1

如果你可以使用jQuery它会是这样的：

$("#N-03-item").css({
     "width": $("#N-03").width()
});

Answer 2

好的，您不必为此使用JavaScript。检查这个小提琴http://jsfiddle.net/jeykeu/WCHcP/2/

<强>更新

好的，@ sanitycheck现在我用jQuery做了。查看小提琴http://jsfiddle.net/jeykeu/2dBJa/2我希望它有所帮助

Answer 3

这是一个完整的工作示例。一旦图像加载完毕，就会调整DIV的宽度。这可以早在domready事件。无需等到document.onload触发。我略微改进了你的标记，摆脱了BR标签。（见JSFiddle）

CSS

.link-thumb { float: left; border: 1px solid gold; position: relative; }
.link-thumb img { display: block; }
.desc { position: absolute; }

HTML

<div class="link-thumb" id="id">
    <a href="#">
        <img class="thumb" id="id" src="http://placekitten.com/100/100" alt="foo" width="100" height="100" />
        <span class="desc">Frosted Flower Choker Necklace 18"</span>
    </a>
</div>

JS

$('.thumb').on('load', function() {
    var $this = $(this);
    $this.parents('.link-thumb').width( $this.width() );
});

如果您不使用jQuery 1.7+，请使用.on方法替换.bind方法！

编辑：我合并了dave的CSS解决方案。所以这个脚本只需要运行IE7及更早版本！但是，根据您的使用情况，您现在可能必须在.link-thumb上设置固定高度，因为.desc现在不是流程的一部分。

Answer 4

基于这些假设：

您无法访问图片的宽度，并通过服务器代码在包含DIV上设置该宽度
您可以预留足够的空间用于换行，因为解决方案使用绝对定位并从流中取出文本

我会尝试：

#N-03-item {
    position : relative;  
}

/* if you can add a class for items, in addition to ID (e.g. N-03-item) than use a  
   rule such as 

.item {
     position :relative
 }

 */

 .description{
      position : absolute;
 }

描述绝对定位，但没有指定顶部或左侧。 大多数用户代理会尝试将.description元素放在应该出现的位置。这将导致描述的宽度受到项目DIV的宽度的约束（它本身被缩小以适合图像的宽度，因为它向左浮动）。

我认为如果项目后面有项目，你仍然需要在项目下方保留足够的空间，文本将从流程中取出。

示例：http://jsfiddle.net/5FJvd/

如何根据缩放的图像宽度动态设置div宽度

4 个答案: