как сделать автоматический перенос элементов в следующую колонку?

Рейтинг: 1Ответов: 2Опубликовано: 15.04.2015

например есть контейнер

<div id="x" some_magick_param_max_elements_inside=5>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
  <a>5</a>
  <a>6</a>
  <a>7</a>
</div>

в результате хочу видеть такой результат

1  6
2  7
3
4
5

как? возможен вариант с таблицей

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

http://jsfiddle.net/r1135zkr/

div {
    height: 6em;
    -webkit-column-width: 7em;
    -moz-column-width: 7em;
    column-width: 7em;
}

a {
    display: block;
    line-height: 1.2em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}
▲ 1

Посмотрите мой вариант на jQuery, возможно он вам поможет решить задачу. На идеальность не претендую, набросал то что хотел видеть автор :)

$(document).ready(function() {
  var cells = $('#x').find('a');

  var col;

  cells.each(function(index) {

    if (index % 5 == 0) {
      var colNumber = index / 5 + 1;
      $('#result').append('<div class="col-' + colNumber + '"></div>');
      col = $('#result').find('.col-' + colNumber);
      col.append($(this).clone());
    } else {
      col.append($(this).clone());
    }

    $(this).detach();
  });
});
#result {
  width: 900px;
}
[class*='col-'] {
  float: left;
  width: 50px;
}
a {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x">
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
  <a>5</a>
  <a>6</a>
  <a>7</a>
  <a>8</a>
  <a>9</a>
  <a>10</a>
  <a>11</a>
  <a>12</a>
  <a>13</a>
  <a>14</a>
  <a>15</a>
  <a>16</a>
  <a>17</a>
  <a>18</a>
  <a>19</a>
  <a>20</a>
  <a>21</a>
  <a>22</a>
  <a>23</a>
</div>

<div id="result"></div>