Question

如何使用position:relative;动态更改元素的大小？我尝试使用width:45%;使其成为容器的45％，但是当更改浏览器大小时，我发现它仍然是最初加载的大小，当我刷新页面时，它更小，但是当我把页面变得更大时，它仍然保持较小我将接受jQuery和/或Javascript解决方案，但非常喜欢CSS。此外，如果这似乎是我的代码的错误，而不是由于position:relative;基本上的工作方式，请告诉我，我将把我的代码添加到帖子中。

编辑：已添加代码

<div id="container">
<p class="caption">
    <img class="thumbnail" src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"> <span>
                <b>This is the Caption's Title</b>
                This is the caption's description
            </span>

</p>

查看其余的here

它似乎在小提琴中工作，不知道为什么它不会在客户端工作。

Answer 1

您的问题是由于在页面加载时执行的javascript。

当它迭代.captions时，会将内联样式设置为宽度和高度的.caption。

这部分：

...
     $(this)
        // Add the following CSS properties and values
        .css({
            // Height equal to the height of the image
            "height": $(this).children("img").height() + "px",
            // Width equal to the width of the image
            "width": $(this).children("img").width() + "px"
        })
...

jQuery .css设置内联样式，因此当您调整窗口大小时，没有任何更改，因为img具有静态宽度和高度。

您尝试使用!important声明在CSS中覆盖此内容，但内联样式已胜出。

删除这段代码似乎可以解决问题，但我不知道是否会引入其他问题。

我还将此代码放在自己的名为setCaptionSize()的函数中，并在页面加载时将其激活并将其附加到窗口调整大小事件。

$(function () {
   setCaptionSize();
   $(window).resize(setCaptionSize);    
});

我还将悬停事件移出setCaptionSize，因此不会多次绑定。

请参阅此Fiddle了解演示

CSS相对元素的动态定位

1 个答案: