выкладывать названия месяцев в два столбца с помощью css

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

Вы можете попытаться создать этот 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 2

Если 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>

Answer 3

Я бы просто использовал один div и назначил следующий CSS

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

Это создаст 2 столбца, которые заполнены данными данными.

Дополнительная информация: количество столбцов @ MDN и макеты с несколькими столбцами @ caniuse.com