Css 按特定顺序排列的相应中心六边形蜂窝布局

我正在尝试创建一些六边形块，其中包含特定布局中的内容。我有四个区块，从顶部的一个区块开始，然后是一行两个区块，最后是一行一个区块，如下图所示。我在interweb上发现的所有演示的问题是，

使用了

浮动：左

。我尝试使用

display:inline块

和

display:inline

，但都不起作用。我还需要它具有响应性，以便在iPad上和下面的图像块成一行一行。有人知道这个问题的解决方案吗？或者我需要给a团队打电话吗

---

我有下面的代码，你可以试试

body{
  font-family: 'Open Sans', arial, sans-serif;
  background:#fff;

}
*{
  margin:0;
  padding:0;
}
#categories{
  overflow:hidden;
  width:100%;   /* you can change the width here */
  margin:0 auto;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
#categories li{
  position:relative;
  list-style-type:none;
  width:27.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 32.16760145166612%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;

  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2){
  margin:0 1%;
}
#categories li:nth-child(6n+4){
  margin-left:0.5%;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
  margin-bottom: -6.9285714285%;

  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
  margin-bottom:0%;
}
#categories li *{
  position:absolute;
  visibility:visible;
}
#categories li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background: #000;
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);

    -webkit-backface-visibility:hidden;

}

/* HEX CONTENT */
#categories li img{
  left:-100%; right:-100%;
  width: auto; height:100%;
  margin:0 auto;
}

#categories div h1, #categories div p{
  width:90%;
  padding:0 5%;
}
#categories li h1{
/*  bottom:110%;  */
  font-style:italic;
  font-weight:normal;
  font-size:1.5em;
  padding-top:50%;
  padding-bottom:100%;
}
#categories li h1:after{
    content:'';
  display:block;
  position:absolute;
  bottom:-1px; left:45%;
  width:10%;
  text-align:center;
  z-index:1;
  border-bottom:2px solid #fff;
}
#categories li p{
    padding-top:50%;
    top:10%;
    padding-bottom:50%;
}


/* HOVER EFFECT  */

#categories li div:hover h1 {

}

#categories li div:hover p{

}

</style>




<ul id="categories" class="clr">
  <li class="pusher"></li>
    <li>

      <div>
        <h1>Lorem Ipsum is simply</h1>
        <p>There are many variations of passages of Lorem Ipsum available</p>
    </div>
  </li>
   <li class="pusher"></li>
    <li>
   <div>
        <h1>Lorem Ipsum is simply</h1>
        <p>There are many variations of passages of Lorem Ipsum available</p>
    </div>
  </li>
  <li>
   <div>
        <h1>Lorem Ipsum is simply</h1>
        <p>There are many variations of passages of Lorem Ipsum available</p>
    </div>
  </li>
   <li class="pusher"></li> <li class="pusher"></li>
     <li>
       <div>
        <h1>Lorem Ipsum is simply</h1>
        <p>There are many variations of passages of Lorem Ipsum available</p>
    </div>
  </li>



</ul>

正文{
字体系列：“开放式Sans”、arial、Sans serif；
背景：#fff；
}
*{
保证金：0；
填充：0；
}
#类别{
溢出：隐藏；
宽度：100%；/*您可以在此处更改宽度*/
保证金：0自动；
}
.clr:之后{
内容：“；
显示：块；
明确：两者皆有；
}
#李类{
位置：相对位置；
列表样式类型：无；
宽度：27.85714285714286%；/*=（100-2.5）/3.5*/
填充底部：32.16760145166612%；/*=宽度/0.866*/
浮动：左；
溢出：隐藏；
可见性：隐藏；
-webkit变换：旋转（-60度）倾斜（30度）；
-ms变换：旋转（-60度）倾斜（30度）；
变换：倾斜旋转（-60度）（30度）；
}
#类别li:n个孩子（3n+2）{
利润率：0.1%；
}
#li类：第n个孩子（6n+4）{
左边距：0.5%；
}
#第li类：第n个孩子（6n+4），#第li类：第n个孩子（6n+5），#第li类：第n个孩子（6n+6）{
利润上限：-6.9285714285%；
利润底部：-6.9285714285%；
-webkit变换：translateX（50%）旋转（-60度）倾斜（30度）；
-ms变换：translateX（50%）旋转（-60度）倾斜（30度）；
变换：translateX（50%）旋转（-60度）倾斜（30度）；
}
#类别li:n个孩子（6n+4）：最后一个孩子，#类别li:n个孩子（6n+5）：最后一个孩子，#类别li:n个孩子（6n+6）：最后一个孩子{
利润底部：0%；
}
#李类*{
位置：绝对位置；
能见度：可见；
}
#类别li>div{
宽度：100%；
身高：100%；
文本对齐：居中；
颜色：#fff；
溢出：隐藏；
背景：#000；
-webkit变换：倾斜（-30度）旋转（60度）；
-ms变换：倾斜（-30度）旋转（60度）；
变换：倾斜（-30度）旋转（60度）；
-webkit背面可见性：隐藏；
}
/*十六进制内容*/
#李明{
左：-100%；右：-100%；
宽度：自动；高度：100%；
保证金：0自动；
}
#类别部门h1、#类别部门p{
宽度：90%；
填充：0.5%；
}
#类别li h1{
/*底部：110%*/
字体：斜体；
字体大小：正常；
字号：1.5em；
垫面：50%；
垫底：100%；
}
#类别李h1：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：-1px；左侧：45%；
宽度：10%；
文本对齐：居中；
z指数：1；
边框底部：2倍实心#fff；
}
#李平{
垫面：50%；
排名前10%；
垫底：50%；
}
/*悬停效应*/
#类别li div：悬停h1{
}
#类别李分区：悬停p{
}



Lorem Ipsum只是
有许多不同的通道洛雷姆Ipsum可用




Lorem Ipsum只是
有许多不同的通道洛雷姆Ipsum可用



Lorem Ipsum只是
有许多不同的通道洛雷姆Ipsum可用




Lorem Ipsum只是
有许多不同的通道洛雷姆Ipsum可用

为什么这篇文章会被否决？这是一个真正的问题，我有！谢谢，成功了。我只需要在

ul

上将填充重置为0，并使宽度为117%以使其居中。如何使间距/间距更大，六边形更大？1）对于间距，您可以从“#类别li:n子（3n+2）{}”2”编辑，对于宽度，您可以从“#类别li”编辑