CSS -让卡片盒子变得更大，比它更大

Question

所以我得到了Javascript和CSS的一部分。

Javascript：

$('.item-card').css("width", $('.item-card').width() + "px");
$('.item-card').css("font-size", $('.item-card').width() * .13 + "px");

CSS：

  margin-left: 1vw;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  right: -15%;
  width: 10vw;
  display: inline-block;
  position: relative;
  white-space: normal;

好吧，有了CSS，它对于显示项目来说是一个“完美”的框，但我的问题是我希望它更大，但如果我改变宽度...什么都没发生。我怎么才能把那个盒子变大呢？

Answer 1

您现在使用的代码将宽度从单位"vw“转换为单位"px"，但实际上并不改变屏幕上的宽度。

如果要更改框的大小，则在再次设置它之前，需要使用对width属性的调用执行某种操作：

// double the width
$('.item-card').css("width", $('.item-card').width() * 2 + "px");

如果你想让长方体保持相同的尺寸比例，请确保你也修改了'height‘属性。