Question

此HTML片段在一系列列中传播了一长串短项目，因此扫描更容易，并且不占用更多的垂直空间。一切都整齐排列，如果您调整浏览器窗口的大小，列数会自动调整。这一切都很棒。唯一的问题是每列的 width 是在CSS中硬编码的。

<!doctype html>
<style>
ul.hlist {
    width: 80%;
    column-width: 6em;
    -moz-column-width: 6em;
    -webkit-column-width: 6em;
}
ul.hlist > li { display: block; }
</style>
<p>This header unconditionally uses one or more of these deprecated 
   integer typedefs:</p>
<ul class="hlist">
    <li><code>caddr_t</code></li>
    <li><code>daddr_t</code></li>
    <li><code>fsid_t</code></li>
    <li><code>quad_t</code></li>
    <li><code>u_int_t</code></li>
    <li><code>u_quad_t</code></li>
    <li><code>u_int16_t</code></li>
    <li><code>u_int32_t</code></li>
    <li><code>u_int64_t</code></li>
    <li><code>u_int8_t</code></li>
    <li><code>u_char</code></li>
    <li><code>u_short</code></li>
    <li><code>u_int</code></li>
    <li><code>u_long</code></li>
    <li><code>n_short</code></li>
    <li><code>n_long</code></li>
    <li><code>n_time</code></li>
</ul>

使用一些JavaScript，可以扫描列表并将column-width覆盖到最宽列表项的实际宽度;因为每个<li>被拉伸到列的当前宽度，所以有一些繁琐，所以你必须向内看，但这不是一个严重的障碍。

function innerWidth (el) {
    var kids = el.children;
    var w = 0;
    for (var i = 0; i < kids.length; i++)
        w += kids[i].offsetWidth;
    return w;
}
function setColumnWidth (list) {
    var items = list.children;
    var mW = 0;
    for (var i = 0; i < items.length; i++) {
        var w = innerWidth(items[i]);
        if (w > mW)
            mW = w;
    }
    list.setAttribute("style",
                      "column-width:" + mW + "px;" +
                      "-moz-column-width:" + mW + "px;" +
                      "-webkit-column-width:" + mW + "px");
}
document.addEventListener("DOMContentLoaded", function (e) {
    var lists = document.getElementsByClassName("hlist");
    for (var i = 0; i < lists.length; i++)
        setColumnWidth(lists[i]);
});

问题，是否有任何方法可以获得与仅使用CSS的JS相同（或几乎如此）的效果？请注意：

在示例中，每个<li>的内容都包含在<code>中，但您的答案不能依赖于此，因为在其他情况下不一定如此。
我已经有一个完全客户端的解决方案，在上下文中额外的服务器端处理非常尴尬，所以我非常喜欢仅限客户端的答案。
涉及实验性或尚未部署的CSS功能的答案都很好。

没有JS渲染：http://jsfiddle.net/7F8n6/2/（列太宽）
使用JS渲染：http://jsfiddle.net/7F8n6/3/

Answer 1

项目在＆lt; code＆gt;内默认情况下，元素使用等宽字体呈现。这意味着它们的宽度仅取决于字符数。

假设您可以影响服务器上的完整页面，请确定服务器上包含最多字符的项目。这是9。

现在在页面中生成一个CSS规则，将列宽设置为9个字符：

column-width: 9ch;
-moz-column-width: 9ch;
-webkit-column-width: 9ch;

'ch'单位是单个'0'（零）的宽度。每个浏览器都不支持它，请参阅MDN，所以我不知道这个解决方案是否足够好。

CSS - 灵活的列数，宽度由内容决定 - 可能吗？

1 个答案: