相對元素的CSS動態定位

如何動態地改變元素的大小position:relative;？我嘗試使用width:45%;來使它成爲容器的45％，但是在更改瀏覽器大小時，我發現它保持了它最初加載的大小，當我刷新頁面時，它的尺寸較小，但保持較小時我讓頁面變大了。我會接受jQuery和/或Javascript解決方案，但會非常喜歡CSS。此外，如果這似乎是我的代碼錯誤，而不是由於position:relative;從根本上工作的方式，請告訴我，我將我的代碼添加到小提琴的帖子中。相對元素的CSS動態定位

編輯：代碼添加

<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

似乎在搗鼓工作，不知道爲什麼它不會工作客戶端。

來源

2015-07-04 unironicallyironic

@ chipChocolate.py我加了我的代碼。 – unironicallyironic

找不到任何問題。 – Rayon

你的小提琴壞了。 JavaScript沒有執行。我將'$（window）.load（function（）...'改爲'$（function（）...'，它似乎工作。[New Fiddle]（https://jsfiddle.net/hv1hvqhs/3 /） – zgood

您的問題是因爲在頁面加載時執行的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有靜態的寬度和高度。

您試圖在您的CSS中使用!important聲明覆蓋此內容，但內聯樣式正在勝出。

刪除這段代碼似乎可以解決問題，但我不知道是否會引入其他問題。

我也把這個代碼放在自己的函數setCaptionSize()中，並在頁面加載並附加到窗口大小調整事件時觸發它。

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

我也感動了懸停事件出來setCaptionSize這樣就不會坐上開往多次。

看到這個Fiddle的演示

來源

2015-07-04 04:27:42 zgood

謝謝，這個工作，但我想我可能會使用另一種做法是在這裏找到：http://jsfiddle.net/WEWvs/2/更簡單，更清潔。 – unironicallyironic

相對元素的CSS動態定位

回答

相關問題