Wie zentriert man Gegenstände im Isotopenbehälter?

Question

Ich habe ein Isotopenraster mit einer nicht festen Breite und ich weiß nicht, wie ich die Gegenstände im Isotopenbehälter zentriere.

.box{ 
width: 40px; 
height: 40px; 
background-color: #e74c3c; 
margin: 0 auto; 
} 

dass css die Elemente nicht zentriert. here ist die Verbindung zur Geige, die mein Problem darstellt.

Wie kann ich die roten Quadrate in der Blackbox zentrieren?

Answer 1

Der einfachste Weg ist Mauerwerk zu verwenden:

jsFiddle

var $container = $('#container'); 
// init 
$container.isotope({ 
// options 
itemSelector: '.box', 
masonry: { 
columnWidth: 40, 
isFitWidth: true 
} 
}); 

Answer 2

Es ist wie jedes Ihrer Boxen aussieht wird absolute Positionierung wie so zugeordnet:

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div> 
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div> 

So wie ich es an die Arbeit bekam, war alle Felder in einem anderen div Behälter zu wickeln, und manipulieren die relative Positionierung dass neue Container wie folgt (oder lesen Sie in diesem fiddle):

var $container = $('#container'); 
 
// init 
 
$container.isotope({ 
 
    // options 
 
    itemSelector: '.box', 
 
    layoutMode: 'fitRows' 
 
});

#container { 
 
    background-color: #333; 
 
    width: 90%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
#boxes-collection { 
 
    position: absolute; 
 
    left: 28%; 
 
    width: 100%; 
 
} 
 

 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #e74c3c; 
 
    margin: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script> 
 
<div id="container"> 
 
    <div id="boxes-collection"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>