Question

您将使用什么HTML和CSS来布局两列中的月份名称，如：

january july
feb     aug
mar     sep
apr     oct
may     nov
jun     dec

月份名称来自数组，html是为i18n目的动态生成的。

如果是：

january february
mar     apr
 ...

我会把它们放在一个DIV中，所有这些都是一个月的宽度的两倍+一些空间并浮动它们。但按照规定订购它们似乎更复杂......

我必须为这些列引入两个额外的DIV吗？

Answer 1

我只使用一个div并分配以下CSS

column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;

这将创建2个用给定数据填充的列。

进一步阅读：column-count@MDN和multi column layouts @caniuse.com

Answer 2

您可以尝试生成此html：

<div style="width: 200px; float: left">
  <p>MONTH FROM 1 TO 6</p>
</div>
<div style="width: 200px; float: left">
  <p>MONTH FROM 7 TO 12</p>
</div>
<div style="clear: both"></div>

当然，您可以将样式定义移动到CSS样式表

Answer 3

如果生成HTML，您可以执行以下操作（jsFiddle）：

<div style="width: 100px">
    <script type="text/javascript">
        var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
                      'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
        for (var i = 0; i < 6; i++) {
            document.write('<div style="width: 50px;float: left">' + months[i] + '</div>');
            document.write('<div style="width: 50px;float: left">' + months[i + 6] + '</div>');
        }
    </script>
</div>

使用css在两列中列出月份名称

3 个答案: