Einrücken von geraden Sechseckreihen in CSS

Question

Ich habe derzeit eine Liste von Sechsecken (Bildern), die ich in die nächste Zeile umbrechen muss, wenn die Browserbreite abnimmt. Wenn dies geschieht, bilden sie jedoch gerade Linien, wie sie im ersten Bild zu sehen sind, und beginnen jeweils am selben Punkt auf der x-Achse.

Here is the JS Fiddle (wenn auch die Flüche fließen nicht richtig, weil sie nicht Bilder sind). Der eigentliche Code hierfür lautet:

<div class="container"> 
    <span> 
     <img class="hex" src="img/hex.png"> 
    </span> 
    ... 
</div> 

Und die CSS ist:

.container { 
    padding-top: 80px; 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.container span { 
    line-height: 129px; 
    display: inline-block; 
} 

.container .hex { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Was würde ich alternative zu tun ist die Zeilen so, dass jede zweite Zeile in einem der Sechseckgrße Offset beginnt, in Abbildung zwei gesehen. Es sollte auch beachtet werden, dass dieses Beispiel auch eine negative y-Position relativ zu der jeweiligen Position aufweist, wie sie aus dem ersten Bild bestimmt wird.

Gibt es eine Möglichkeit, dies nur mit CSS zu tun? Ich würde es vermeiden, wenn möglich eine Bibliothek zu benutzen.

Dies ist vergleichbar mit der Frage here, aber ich brauche die gesamte Struktur in der Lage sein, eine unbestimmte Anzahl von Zeilen zu haben, so dass die Lösung, wo ich angeben, welche Elemente in welchen Zeilen sind nicht machbar für meine Anwendung.

Answer 1

Hier ist eine Lösung, die JavaScript, um die notwendigen Transformationen auf die Elemente hinzuzufügen, verwendet.

CSS:

.container { 
    padding-top: 80px; 
    width: 65%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.floatBox { 
    margin-left: 15px; 
    margin-right: 15px; 
} 

.floatBox div { 
    display: inline-block; 

} 
.floatBox div.odd { 
    margin-left: 67px; 
} 

JS:

var floatBox = $(".floatBox"); 
var elements = floatBox.children(); 
var numElements = elements.length; 

//reset all styles so they don't compound 
elements.removeClass("odd"); 
elements.css("transform", "translateY(0)"); 
elements.css("-ms-transform", "translateY(0)"); 
elements.css("-webkit-transform", "translateY(0)"); 

var width = $(window).width() *.65; 
var evenRowWidth = Math.floor(width/135); 
var oddRowWidth = Math.max(evenRowWidth - 1, 1); 
var numberOfRows = 0; 

var floatBoxWidth = evenRowWidth *138; 
var delta = Math.floor((width-floatBoxWidth)/2); 
floatBox.css("margin-left", delta); 
floatBox.css("margin-right", delta); 

var test = numElements; 
var j = 2; 
while (test > 0) 
{ 
    if (j % 2 == 0) 
    { 
     test -= evenRowWidth; 
    } 
    else 
    { 
     test -= oddRowWidth; 
    } 
    numberOfRows++; 
    j++; 
} 

j = 0; 
var actionRow = 2; 
var rowCount = 1; 
var first = true; 
for (var i = evenRowWidth; i < numElements; i++) 
{ 
    var translationAmt = -37*(actionRow-1); 
    if (actionRow % 2 == 0 && first) 
    { 
     first = true; 
    } 
    if (first) 
    { 
     $(elements.get(i)).addClass("odd"); 
     first = false; 
    } 
    $(elements.get(i)).css("transform", "translateY(" + translationAmt + "px)"); 
    $(elements.get(i)).css("-ms-transform", "translateY(" + translationAmt + "px)"); 
    $(elements.get(i)).css("-webkit-transform", "translateY(" + translationAmt + "px)"); 

    if (actionRow % 2 == 0) 
    { 
     if (rowCount == oddRowWidth) 
     { 
      actionRow++; 
      rowCount = 0; 
     } 
    } 
    else 
    { 
     if (rowCount == evenRowWidth) 
     { 
      actionRow++; 
      rowCount = 0; 
      first = true; 
     } 
    } 
    rowCount++; 
} 

HTML:

<div class="container"> 
    <div class="floatBox"> 

     <div> 
      <span> 
       <img src="image.png"> 
      </span> 
     </div> 
     ... 
    </div> 
</div> 

Answer 2

Lösung in JS Fiddle Demo:

Demo 1:

http://jsfiddle.net/mkginfo/bhxohocv/

HTML-Code:

<div class="container"> 
    <!-- odd line --> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <!-- even line --> 
    <span class="odd"> 
     <div class="hexagon"> </div> 
    </span> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <!-- odd line --> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
    <span> 
     <div class="hexagon"> </div> 
    </span> 
</div> 

CSS Co de:

.container { 
    padding-top: 80px; 
    width: 65%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.container span { 
    line-height: 129px; 
    display: inline-block; 
    position: relative; 
    margin-bottom: 25px; 
} 
.container span.odd { 
    line-height: 129px; 
    display: inline-block; 
    position: relative; 
    margin-bottom: 25px; 
    margin-left: 52px; 
    margin-top: -20px; 
} 

.container .hex { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
} 

.hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
} 

.hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
} 

Demo 2:

http://jsfiddle.net/mkginfo/wnsjfwt0/