Html 将宽度从自动设置为100%？

我有这个部门

<div id="view_album">
    View Photo
</div>

是否可以将宽度从“自动”设置为动画？100%的最终宽度不起作用，但如果我将初始宽度设置为100px之类的特定值，它就起作用了。但我需要它自动，因为div中的文本“View Photo”可以是其他文本，也可以是更长的文本

关于我的工作：

如您所见，带有“查看相册”的div的特定宽度为115px。然后将动画设置为100%。但是如果我把里面的文字改成“Abc”，它显然比View Album短，不需要115像素的宽度

---

这就是为什么我需要它自动。

首先，将id更改为类，因为所有专辑封面都重复相同的id

您可以使用自动宽度，在加载站点后，运行jQuery脚本并将当前宽度添加到css：

$(document).ready(function(){
    $.each($('.view_album'), function(){
        $(this).css('width', $(this).width() + 'px');
    }
});

---

我认为CSS不能以您想要的方式设置动画/进行转换。必须使用脚本显式设置初始宽度。但是，我们必须知道浏览器根据样式宽度：auto计算的宽度。在元素渲染后，可以使用getComputedStyle或简单地通过jQuery中的css方法轻松完成。这里重要的是，您必须通过CSSRule修改样式，而不是通过元素的style属性。我不知道为什么，但看起来CSS就是这样工作的。以下是查找规则视图相册并将宽度设置为特定值的脚本，以便悬停可以很好地进行转换：

var ss = document.styleSheets;
for(var i = 0; i < ss.length; i++){
  var rules = ss[i].cssRules || ss[i].rules;
  var br = false;
  for(var j = 0; j < rules.length; j++) {
    if(rules[j].selectorText == '#view_album'){            
        rules[j].style.width = $('#view_album').css('width');
        br = true;
        break;
    }
  }
  if(br) break;
}

注意：这样做将不再在元素上设置width:auto，因此您不应该动态更改该元素的文本，我认为这不是您的用例。如果必须动态更改，并且宽度应自动展开/折叠，则可以在设置文本/innerHTML之前先尝试在其上设置width:auto

---

这里允许您更改view_相册的字体大小，以便相应地调整宽度

你试过这个吗？太专业了，不需要先尝试？@KingKing我在某个地方使用了这种技术，但针对的问题略有不同。但是需要初始宽度。在你发布这个答案之前，我就已经尝试过这个想法，看起来像：宽度的悬停样式：100%被清除，没有任何效果，尽管如果你设置其他属性，例如颜色，悬停可以使它从当前颜色过渡到设置的颜色。

var ss = document.styleSheets;
for(var i = 0; i < ss.length; i++){
  var rules = ss[i].cssRules || ss[i].rules;
  var br = false;
  for(var j = 0; j < rules.length; j++) {
    if(rules[j].selectorText == '#view_album'){            
        rules[j].style.width = $('#view_album').css('width');
        br = true;
        break;
    }
  }
  if(br) break;
}