调整项目不按预期工作
答
您可以使用CSS Flexbox的。并将柔性对齐属性包含在父元素中。
就像:
.wedding-img {
display: flex; /* Flex Container */
flex-wrap: wrap; /* Wrapping Hexagons to next line after a certain width limit is reached */
justify-content: center; /* Center aligning hexagons horizontally */
align-items: center; /* Center aligning hexagons vertically */
}
看一看片断如下(使用全屏正常查看):
.wedding-img {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 103px;
}
.hexagon {
overflow: hidden;
visibility: hidden;
width: 260px;
height: 314px;
margin: -60px 0 0 0px;
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
display: inline-block;
margin: 1em;
margin-top: -103px;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
padding: 0px 12px;
text-align: center;
background-repeat: no-repeat;
background: #f1f4f5;
visibility: visible;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
display: table;
}
body {
margin: 0;
}
<div class="wedding-img">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 groom"></div>
</div>
</div>
</div>
希望这有助于!
谢谢你,你的回答更接近我的需求,但不完全,需要再次帮助,第一层(4 hexogons)和第二层(3 hexokons)之间有很大差距 – Naresh
完美谢谢verymuch – Naresh
@ e-Designary这是因为六角形的转换,你可以应用'margin-top'hack,但这会破坏你的响应式设计,请看看我更新的答案。 –