Лучший способ разместить произвольно сгенерированные абсолютные divs как сетку?

Question

Итак, у меня есть приложение, которое генерирует случайное число div, которые всегда абсолютно позиционируются. Нет, я не могу сделать их относительными из-за других факторов в приложении.

Есть ли способ в CSS или JQuery, чтобы сделать эти абсолютно позиционированные divs сетчатыми? Так что-то вроде:

 X X X 
    X X X 
    X X X 
    etc... 

В настоящее время, они выходят так:

 X 
    X 
    X 
    etc... 

Я не знаю, сколько дивы будет в каждом запросе; может быть 5, может быть 80, может быть 17 и т.д.

Answer 1

Если вы знаете ширину контейнера, вы можете использовать этот код:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<style type="text/css"> 
.x { 
    position: absolute; 
} 
</style> 

<div id="container"> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
    <div class="x">x</div> 
</div> 

<script> 
$(document).ready(function() { 
    var offset = 10; 
    var offsetTop = 10; 
    var _width = $("#container").width(); 
    console.log(_width); 

    $('.x').each(function(e, item) { 
    console.log($(item)); 
    $(item).offset({ 
     top: offsetTop, 
     left: offset 
    }); 
    offset += 20; 

    if (offset >= _width) { 
     offsetTop += 30; 
     offset = 10; 
    } 
    }) 
}) 
</script> 

Answer 2

Поскольку я работаю с React.js и реагировать добавляет уникальный атрибут HTML5 данных для каждого элемента (т.е. данных reactid), с помощью SASS, я сделал это:

@for $i from 0 through 153 { 
$base: 865px; 
$inc: 150px; 
.enrollments__inner > div[data-reactid$='#{$i}'] { 
    position: absolute; 
    @if $i >= 0 and $i <= 20 { 
     left: (80 * $i) + px; 
     top: $base; 
    } 
    @if $i >= 21 and $i <= 40 { 
     left: (80 * ($i - 21)) + px; 
     top: $base + $inc; 
    } 
    @if $i >= 41 and $i <= 60 { 
     left: (80 * ($i - 41)) + px; 
     top: $base + ($inc * 2); 
    } 
    @if $i >= 61 and $i <= 80 { 
     left: (80 * ($i - 61)) + px; 
     top: $base + ($inc * 3); 
    } 
    @if $i >= 81 and $i <= 100 { 
     left: (80 * ($i - 81)) + px; 
     top: $base + ($inc * 4); 
    } 
    @if $i >= 101 and $i <= 121 { 
     left: (80 * ($i - 101)) + px; 
     top: $base + ($inc * 5); 
    } 
    @if $i >= 122 and $i <= 142 { 
     left: (80 * ($i - 122)) + px; 
     top: $base + ($inc * 6); 
    } 
    @if $i >= 143 and $i <= 153 { 
     left: (80 * ($i - 143)) + px; 
     top: $base + ($inc * 7); 
    } 
} 

}