jquery - 复制一个 CSS 类值并生成一个新值？

Question

我正在为我的网页布局使用网格系统，很像 Grid 960 layout .我有一堆针对所有网格宽度的预定义类。当我想要 div要达到一定的宽度，我只需这样做:

<div class="grid_4">
  ...
</div>

但是，对于我的一些 div s 我添加边框，所以我创建了一个自定义边框类，我将其添加到那些 div我想要一个边框。

.right-border {
  border-right: 1px solid #e1e1e1;
}

<div class="grid_4 right-border">
  ....
</div>

问题是，当我添加边框时，网格系统会失败，因为页面上没有足够的空间来容纳所有 div s(因为其中一个有边框)。我可以手动调整每个 div我添加了一个边框，但我想要一个更清晰的解决方案，因为每个网格的每个宽度都不同(取决于我使用的网格类)。

有没有办法得到当前的div s 的宽度，然后简单地为那些 div 减去 1类别为 right-border 的 s ？我认为这可能只适用于 jQuery，但也许有一些我不知道的 CSS 魔法可以实现这一点。

有什么想法吗？

Answer 1

您可以尝试使用边框框(如果您的网格系统还没有)，这样元素的宽度将包括边框:

[class*="grid_"]{box-sizing:border-box}

这样一来，添加边框(或填充)不会影响元素的计算宽度——相反，内容区域会适当缩小。