html - 在 CSS 中缩进偶数行六边形

Question

我目前有一个六边形(图像)列表，当浏览器宽度减小时，我会换行到下一行。然而，当发生这种情况时，它们会形成偶数条线，如第一张图片所示，每条线都从 x 轴上的同一点开始。

Here is the JS Fiddle (虽然，六边形不能正确流动，因为它们不是图像)。真正的代码是:

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

CSS 是:

.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;
}

我想要做的是交替行，以便每隔一行从六边形大小的偏移量开始，如图 2 所示。还应注意，该示例相对于根据第一图像确定的相应位置也具有负 y 位置。

有没有办法只用 CSS 来做到这一点？如果可能的话，我想避免使用库。

这类似于提出的问题 here ，但我需要整个结构能够具有不确定数量的行，因此我指定哪些元素位于哪些行中的解决方案对我的应用程序不可行。

Answer 1

JS Fiddle Demo 中的解决方案:

演示 1:

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

HTML 代码:

<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 代码:

.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;
}

演示 2:

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