使用LESS CSS将宽度计算为百分比减去边距答案

【问题标题】：Calculating width as percentage minus margin with LESS CSS使用LESS CSS将宽度计算为百分比减去边距
【发布时间】：2012-06-04 18:54:54
【问题描述】：

我在我的 CMS 应用中使用 Twitter Bootstrap 网格系统。

当用户构建页面时，他们可以在一行中添加任意数量的列。考虑这一行：

<div class="span9 row">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

我想要做的是添加一个功能，用户可以设置一行以在其中的列之间平均分配其宽度。

所以span5 和span4 类将被覆盖。这本质上就像一个表格行，但我认为将行设置为display: table-row 很麻烦，而且它可能会破坏 TwBootstrap 网格的响应特性。

我想避免的是这样定义每个宽度组合：

<div class="span9 row shared child-count-2">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

在 CSS 中：

.row.span9.shared.child-count-2 > div {
    width: 340px;
}

由于我已经在 CSS 中使用 LESS，我认为可能有一个方便的计算可以使这项工作发挥作用。

问题是指定 50% 的宽度没有考虑到margin-left 的20px。所以我需要取行的宽度，每列减去 20px。然后将剩余的宽度除以列数。

另外，我想避免使用 JavaScript。我不喜欢渲染 99% 的视图，然后在脚本中进行调整。如果脚本执行有微小的延迟，用户会看到布局闪烁。不好。

那么，有没有办法通过 LESS/CSS 做到这一点？

【问题讨论】：

【解决方案1】：

您可以使用 LESS 实现这一目标。使用 LESS，您可以使用 JavaScript 表达式的求值，将它们包装成反引号：

@var: `"hello".toUpperCase() + '!'`;

所以你也可以使用document.getElementById('myId').width 来获取元素的宽度等等。检查这里lesscss.org 并转到“JavaScript 评估”部分。

如果您需要更多帮助，尽管问！ :)

【讨论】：

据我所知，脚本将在编译时进行评估。由于我预编译了我所有的less 文件"hello".toUpperCase() + '!' 最终说"HELLO!" - 并且用于计算宽度的脚本将失败，因为例如document 在编译时是 undefined。
我认为没有其他方法可以做你想做的事！ row 宽度是在 div 元素呈现到文档中时计算的。获得它的宽度的唯一方法是在运行时，当row 元素准备好时。您不应该编译您的 LESS 或在 HTML 正文的末尾添加一行 Javascript 和 CSS，但是，正如您在问题中所说，对于较慢的连接，脚本执行会出现微小的延迟，并且用户会看到布局闪烁.我的建议是尝试这些 JavaScript 方法并测量页面加载速度，进行一些优化并评估延迟的优缺点！
我想我会创建一个更“绝对”的 LESS 脚本，为每个组合编译成特定的宽度。更多的工作，但更好的解决方案恕我直言。