Html 灵活的菱形网格，图像已经是菱形_Html_Css

Html 灵活的菱形网格，图像已经是菱形

html css

Html 灵活的菱形网格，图像已经是菱形,html,css,Html,Css,我在网上找到了许多创建灵活菱形网格的方法，但我对如何适应这些方法一无所知。我的情况有点奇怪。首先，我的例子中的图像已经是92x93px菱形，因此我不需要使用HTML代码来进行变换：旋转和内部文本调整等，我需要网格顶部的菱形比较低的行少。显然，为了灵活，我需要图像收缩，并且它们所在的框也要收缩这是几年前的原始代码，在我试图改进它并完全失败之前。每个CCi都是一个92x93px的图像。以下是代码中使用的图像示例：还有可怕的代码： <div class="boxcoloring" style

我在网上找到了许多创建灵活菱形网格的方法，但我对如何适应这些方法一无所知。我的情况有点奇怪。首先，我的例子中的图像已经是92x93px菱形，因此我不需要使用HTML代码来进行

变换：旋转

和内部文本调整等，我需要网格顶部的菱形比较低的行少。显然，为了灵活，我需要图像收缩，并且它们所在的框也要收缩

这是几年前的原始代码，在我试图改进它并完全失败之前。每个CCi都是一个92x93px的图像。以下是代码中使用的图像示例：还有可怕的代码：

<div class="boxcoloring" style="width:786px; height:578px; margin: auto; -moz-border-radius: .7em; -webkit-border-radius: .7em; border-radius: .7em;">
<div class="hoverimage" style="position:relative; width:10em; height:16em;">
<span style="position:absolute; left:60px;  top:2px;  ">{{CCi|QP (Dangerous)}}</span>
<span style="position:absolute; left:172px; top:2px;  ">{{CCi|Tomato & Mimyuu}}</span>
<span style="position:absolute; left:284px; top:2px;  ">{{CCi|Ceoreparque}}</span>
<span style="position:absolute; left:396px; top:2px;  ">{{CCi|Miusaki}}</span>
<span style="position:absolute; left:508px; top:2px;  ">{{CCi|Yuki (Dangerous)}}</span>
<span style="position:absolute; left:620px; top:2px;  ">{{CCi|Yuuki}}</span>
<span style="position:absolute; left:4px;   top:60px; ">{{CCi|Suguri (Ver.2)}}</span>
<span style="position:absolute; left:116px; top:60px; ">{{CCi|QP}}</span>
<span style="position:absolute; left:228px; top:60px; ">{{CCi|Store Manager}}</span>
<span style="position:absolute; left:340px; top:60px; ">{{CCi|Sweet Breaker}}</span>
<span style="position:absolute; left:452px; top:60px; ">{{CCi|Syura}}</span>
<span style="position:absolute; left:564px; top:60px; ">{{CCi|Yuki}}</span>
<span style="position:absolute; left:676px; top:60px; ">{{CCi|Sora & Sham (Cuties)}}</span>
<span style="position:absolute; left:60px;  top:118px;">{{CCi|Suguri}}</span>
<span style="position:absolute; left:172px; top:118px;">{{CCi|Kyousuke}}</span>
<span style="position:absolute; left:284px; top:118px;">{{CCi|Mei}}</span>
<span style="position:absolute; left:396px; top:118px;">{{CCi|Natsumi}}</span>
<span style="position:absolute; left:508px; top:118px;">{{CCi|Nico}}</span>
<span style="position:absolute; left:620px; top:118px;">{{CCi|Star Breaker}}</span>
<span style="position:absolute; left:4px;   top:176px;">{{CCi|Shifu Robot}}</span>
<span style="position:absolute; left:116px; top:176px;">{{CCi|Saki}}</span>
<span style="position:absolute; left:228px; top:176px;">{{CCi|Chicken}}</span>
<span style="position:absolute; left:340px; top:176px;">{{CCi|Kiriko}}</span>
<span style="position:absolute; left:452px; top:176px;">{{CCi|Krila}}</span>
<span style="position:absolute; left:564px; top:176px;">{{CCi|Sora}}</span>
<span style="position:absolute; left:676px; top:176px;">{{CCi|Tsih}}</span>
<span style="position:absolute; left:60px;  top:234px;">{{CCi|Robo Ball}}</span>
<span style="position:absolute; left:172px; top:234px;">{{CCi|NoName}}</span>
<span style="position:absolute; left:284px; top:234px;">{{CCi|Aru (Scramble)}}</span>
<span style="position:absolute; left:396px; top:234px;">{{CCi|Arthur}}</span>
<span style="position:absolute; left:508px; top:234px;">{{CCi|Nath}}</span>
<span style="position:absolute; left:620px; top:234px;">{{CCi|Sora (Military)}}</span>
<span style="position:absolute; left:116px; top:292px;">{{CCi|Nanako}}</span>
<span style="position:absolute; left:228px; top:292px;">{{CCi|Kyoko}}</span>
<span style="position:absolute; left:340px; top:292px;">{{CCi|Aru}}</span>
<span style="position:absolute; left:452px; top:292px;">{{CCi|Mira}}</span>
<span style="position:absolute; left:564px; top:292px;">{{CCi|Sham}}</span>
<span style="position:absolute; left:676px; top:292px;">{{CCi|Islay}}</span>
<span style="position:absolute; left:60px;  top:350px;">{{CCi|Tomomo}}</span>
<span style="position:absolute; left:172px; top:350px;">{{CCi|Kae}}</span>
<span style="position:absolute; left:284px; top:350px;">{{CCi|Iru}}</span>
<span style="position:absolute; left:396px; top:350px;">{{CCi|Alte}}</span>
<span style="position:absolute; left:508px; top:350px;">{{CCi|Marc}}</span>
<span style="position:absolute; left:620px; top:350px;">{{CCi|Sherry}}</span>
<span style="position:absolute; left:4px;   top:408px;">{{CCi|Tomomo (Casual & Sweet Eater)}}</span>
<span style="position:absolute; left:116px; top:408px;">{{CCi|Marie Poppo}}</span>
<span style="position:absolute; left:228px; top:408px;">{{CCi|Hime}}</span>
<span style="position:absolute; left:340px; top:408px;">[[File:Center_Select.png|link=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/Unlockable_Characters|Random Character]]</span>
<span style="position:absolute; left:452px; top:408px;">{{CCi|Fernet}}</span>
<span style="position:absolute; left:564px; top:408px;">{{CCi|Peat}}</span>
<span style="position:absolute; left:676px; top:408px;">{{CCi|Tequila}}</span>
<span style="position:absolute; left:60px;  top:466px;">{{CCi|Marie Poppo (Mixed)}}</span>
<span style="position:absolute; left:172px; top:466px;">{{CCi|Kai}}</span>
<span style="position:absolute; left:284px; top:466px;">[[File:Center_Select.png|link=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/Bonus_Characters|Random Character]]</span>
<span style="position:absolute; left:396px; top:466px;">[[File:Center_Select.png|link=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/DLC_Characters|Random Character]]</span>
<span style="position:absolute; left:508px; top:466px;">{{CCi|Flying Castle}}</span>
<span style="position:absolute; left:620px; top:466px;">{{CCi|Seagull}}</span>
</div>
</div>


{{CCi | QP（危险）}
{{CCi |番茄和米米尤}
{{CCi | Ceoreparque}}
{{CCi | Miusaki}}
{{CCi | Yuki（危险）}
{{CCi | Yuuki}}
{{CCi | Suguri（第2版）}
{{CCi | QP}}
{{CCi |商店经理}
{{CCi |甜蜜破碎机}
{{CCi | Syura}}
{{CCi|Yuki}}
{{CCi | Sora&Sham（可爱）}
{{CCi|Suguri}}
{{CCi | Kyousuke}}
{{CCi|Mei}
{{CCi |夏目漱石}
{{CCi | Nico}}
{{CCi |破星者}
{{CCi |师傅机器人}
{{CCi | Saki}}
{{CCi|Chicken}
{{CCi | Kiriko}}
{{CCi | Krila}}
{{CCi|Sora}}
{{CCi|Tsih}
{{CCi |机器人球}
{{CCi | NoName}}
{{CCi | Aru（扰码）}
{{CCi | Arthur}}
{{CCi|Nath}
{{CCi |索拉（军事）}
{{CCi | Nanako}}
{{CCi | Kyoko}}
{{CCi|Aru}}
{{CCi|Mira}}
{{CCi|Sham}
{{CCi | Islay}
{{CCi | Tomomo}}
{{CCi|Kae}
{{CCi | Iru}}
{{CCi | Alte}}
{{CCi|Marc}
{{CCi |雪莉}
{{CCi | Tomomo（随意和甜食者）}
{{CCi | Marie Poppo}}
{{CCi | Hime}}
[[文件：Center_Select.png |链接]=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/Unlockable_Characters|随机字符]]
{{CCi | Fernet}}
{{CCi | Peat}}
{{CCi |龙舌兰}
{{CCi |玛丽·波波（混合）}
{{CCi|Kai}
[[文件：Center_Select.png |链接]=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/Bonus_Characters|随机字符]]
[[文件：Center_Select.png |链接]=http://onehundredpercentorangejuice.gamepedia.com/Special:RandomInCategory/DLC_Characters|随机字符]]
{{CCi |飞行城堡}
{{CCi |海鸥}

是的，这是一种糟糕的编码方式，它不灵活，而且很难适应。输出看起来是这样的：目前我可以通过使第一个div样式具有

display:flex来强制它使用flex

然后在CSS中使用things

@媒体屏幕和（最大宽度：1462px）

来缩小图像，但这只是一种非常糟糕的方法，并不适用于所有的flex尺寸

简言之，这是一个非常高的要求，但有人能提供一种方法/解释，这样我就可以用这样的方式来重建它：当我试图调整我发现的大多数菱形代码，试图弄清楚它们是如何工作的，它们只是有点…内爆，因为菱形网格相对于边距和诸如此类的东西来说似乎有点变化无常。任何温和的建议/帮助都将不胜感激。我真的只是想了解。

我想你是在找这样的东西

HTML

CSS

我想你在找这样的东西

HTML

CSS

这段代码使我成为我有史以来最接近的人，但是，这并不是我所需要的。然而，它有任何易于定义的问题。使用您的代码，我能够构建这个非常接近我所寻找的东西：问题是，我希望它在收缩时保留其格式，但它没有。这也使得我无法使用边距，因为当你缩小框时，px值会把图像扔得太高，因为flex不喜欢边距。我很好奇，也许一个计算会更好：这段代码让我成为了我有史以来最接近的人，但是，这并不是我所需要的。然而，它有任何易于定义的问题。使用您的代码，我能够构建这个非常接近我所寻找的东西：问题是，我希望它在收缩时保留其格式，但它没有。这也使得我无法使用边距，因为当你缩小框时，px值会把图像扔得太高，因为flex不喜欢边距。我很好奇，也许计算会更好：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container > div {
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.flex-container:not(:first-child){
  margin-top: -80px;
}
.flex-container.s-row{
  margin-left: 60px;
}