1

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

<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

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

3
  • Рекомендую сделать Ваш длинный параметр через атрибут "data" - он будет валиден.
    – user31688
    15 апр 2015 в 17:55
  • что это значит?
    – John Doe
    15 апр 2015 в 18:02
  • Сделай так: <div id='x' data-some_magick_param_max_elements_inside='5'>. Свои свойства допустимы, но валидатор будет очень недоволен. А если через "data", то он будет доволен как я, после отведения души в GTA, а не на тупых юзерах :)
    – user31688
    15 апр 2015 в 18:06

2 ответа 2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.