Hexagon图像奇数/偶数CSS

Question

所以我有一个六角形图像，当我做ng-repeat时，我希望结果如下。

容器的宽度必须为448像素，图像需要响应。 这就是我尝试过的。

CodePen

HTML

<div class="hexagons">
    <img src="images/hexagon5.png" alt="">
    <img src="images/hexagon6.png" alt="">
    <img src="images/hexagon5.png" alt="">
    <img src="images/hexagon6.png" alt="">
</div>

CSS

.hexagons {
  max-width: 448px;
  height: 800px;
  position: relative;
}
.hexagons img:nth-child(even) {
  position: relative;
  top: -115px;
  left: 193px;
}
.hexagons img:nth-child(odd) {
  position: relative;
}

结果：

有人可以指导我完成这件事。

Answer 1

这可以通过简单地将每个偶数元素偏移六边形的一半来实现，例如：

HTML

Route::get('flights/{from}-{to}/{date}/{adult}-{child}-{infant}', 'MyController@Index');

CSS

<div class="hexagons">
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
</div>

实例： http://codepen.io/veksen/pen/GjYKBJ

您的笔已更正：http://codepen.io/veksen/pen/QKkLJg?editors=1100
请注意，由于图像是块元素，我必须将它们设置为块，然后浮动它们。容器必须足够宽以容纳两个图像（256px宽）。偶数六边形也需要向左移动。

针对响应式更新：http://codepen.io/veksen/pen/XjxWJo?editors=1100
玩了一下百分比，但你明白了！