庫存5x9組合欄位-有解無憂

我有這樣一個 5x9 的網格

.box5x9 {
  width: 300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  width: 50px;
  height: 50px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

<div class="card-bod">
  <section class="grilla">
    <div class="box5x9">
      <div class="modulo" data-x="1" data-y="10" data-a="9"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div class="modulo" data-x="2" data-y="10" data-a="19"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?"></div>
      <div class="modulo" data-x="3" data-y="10" data-a="29"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div class="modulo" data-x="4" data-y="10" data-a="39"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div class="modulo" data-x="5" data-y="10" data-a="49"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div class="modulo" data-x="1" data-y="9" data-a="8"></div>
      <div class="modulo" data-x="2" data-y="9" data-a="18"></div>
      <div class="modulo" data-x="3" data-y="9" data-a="28"></div>
      <div class="modulo" data-x="4" data-y="9" data-a="38"></div>
      <div class="modulo" data-x="5" data-y="9" data-a="48"></div>
      <div class="modulo" data-x="1" data-y="8" data-a="7"></div>
      <div class="modulo" data-x="2" data-y="8" data-a="17"></div>
      <div class="modulo" data-x="3" data-y="8" data-a="27"></div>
      <div class="modulo" data-x="4" data-y="8" data-a="37"></div>
      <div class="modulo" data-x="5" data-y="8" data-a="47"></div>
      <div class="modulo" data-x="1" data-y="7" data-a="6"></div>
      <div class="modulo" data-x="2" data-y="7" data-a="16"></div>
      <div class="modulo" data-x="3" data-y="7" data-a="26"></div>
      <div class="modulo" data-x="4" data-y="7" data-a="36"></div>
      <div class="modulo" data-x="5" data-y="7" data-a="46"></div>
      <div class="modulo" data-x="1" data-y="6" data-a="5"></div>
      <div class="modulo" data-x="2" data-y="6" data-a="15"></div>
      <div class="modulo" data-x="3" data-y="6" data-a="25"></div>
      <div class="modulo" data-x="4" data-y="6" data-a="35"></div>
      <div class="modulo" data-x="5" data-y="6" data-a="45"></div>
      <div class="modulo" data-x="1" data-y="5" data-a="4"></div>
      <div class="modulo" data-x="2" data-y="5" data-a="14"></div>
      <div class="modulo" data-x="3" data-y="5" data-a="24"></div>
      <div class="modulo" data-x="4" data-y="5" data-a="34"></div>
      <div class="modulo" data-x="5" data-y="5" data-a="44"></div>
      <div class="modulo" data-x="1" data-y="4" data-a="3"></div>
      <div class="modulo" data-x="2" data-y="4" data-a="13"></div>
      <div class="modulo" data-x="3" data-y="4" data-a="23"></div>
      <div class="modulo" data-x="4" data-y="4" data-a="33"></div>
      <div class="modulo" data-x="5" data-y="4" data-a="43"></div>
      <div class="modulo" data-x="1" data-y="3" data-a="2"></div>
      <div class="modulo" data-x="2" data-y="3" data-a="12"></div>
      <div class="modulo" data-x="3" data-y="3" data-a="22"></div>
      <div class="modulo" data-x="4" data-y="3" data-a="32"></div>
      <div class="modulo" data-x="5" data-y="3" data-a="42"></div>
      <div class="modulo" data-x="1" data-y="2" data-a="1"></div>
      <div class="modulo" data-x="2" data-y="2" data-a="11"></div>
      <div class="modulo" data-x="3" data-y="2" data-a="21"></div>
      <div class="modulo" data-x="4" data-y="2" data-a="31"></div>
      <div class="modulo" data-x="5" data-y="2" data-a="41"></div>
    </div>
  </section>
</div>

在這些方塊中的每一個中，我都想嵌入一個專案圖示。我想讓一些元素垂直占據 2 和 3 個網格。例如，您可以看到它在 1 個方格上有一把劍，它應該占據 2 個方格。就像在附圖中一樣。如何讓它有意義？庫存 5x9 組合欄位

uj5u.com熱心網友回復：

我將此添加到您的 CSS

.modulo {
  position: relative;
}

.modulo img {
  /* since the modulo have */
  height: var(--modulo-height);
  /* the image now follow the parent box*/
  position: absolute;
  /* will center the image, in the middle of 2 the boxes */
  top: calc(var(--modulo-height) / 2); /* you change also to 50%, if is 50px also the image, otherwise use the calc if the image is larger or smaller */
  z-index: 1;
}

這里是完整的固定代碼：

* {
  --modulo-height: 50px;
}

.box5x9 {
  width: 300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  width: var(--modulo-height);
  height: var(--modulo-height);
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

.modulo {
  position: relative;
}

.modulo img {
  /* since the modulo have */
  height: var(--modulo-height);
  /* the image now follow the parent box*/
  position: absolute;
  /* will center the image, in the middle of 2 the boxes */
  top: calc(var(--modulo-height) / 2);
  /* you change also to 50%, if is 50px also the image, otherwise use the calc if the image is larger or smaller */
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card-bod">
    <section class="grilla">
      <div class="box5x9">
        <div class="modulo" data-x="1" data-y="10" data-a="9">
          <img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png">
        </div>
        <div class="modulo" data-x="2" data-y="10" data-a="19">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?">
        </div>
        <div class="modulo" data-x="3" data-y="10" data-a="29">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png">
        </div>
        <div class="modulo" data-x="4" data-y="10" data-a="39">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png">
        </div>
        <div class="modulo" data-x="5" data-y="10" data-a="49">
          <img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png">
        </div>
        <div class="modulo" data-x="1" data-y="9" data-a="8">
        </div>
        <div class="modulo" data-x="2" data-y="9" data-a="18">
        </div>
        <div class="modulo" data-x="3" data-y="9" data-a="28">
        </div>
        <div class="modulo" data-x="4" data-y="9" data-a="38">
        </div>
        <div class="modulo" data-x="5" data-y="9" data-a="48">
        </div>
        <div class="modulo" data-x="1" data-y="8" data-a="7">
        </div>
        <div class="modulo" data-x="2" data-y="8" data-a="17">
        </div>
        <div class="modulo" data-x="3" data-y="8" data-a="27">
        </div>
        <div class="modulo" data-x="4" data-y="8" data-a="37">
        </div>
        <div class="modulo" data-x="5" data-y="8" data-a="47">
        </div>
        <div class="modulo" data-x="1" data-y="7" data-a="6">
        </div>
        <div class="modulo" data-x="2" data-y="7" data-a="16">
        </div>
        <div class="modulo" data-x="3" data-y="7" data-a="26">
        </div>
        <div class="modulo" data-x="4" data-y="7" data-a="36">
        </div>
        <div class="modulo" data-x="5" data-y="7" data-a="46">
        </div>
        <div class="modulo" data-x="1" data-y="6" data-a="5">
        </div>
        <div class="modulo" data-x="2" data-y="6" data-a="15">
        </div>
        <div class="modulo" data-x="3" data-y="6" data-a="25">
        </div>
        <div class="modulo" data-x="4" data-y="6" data-a="35">
        </div>
        <div class="modulo" data-x="5" data-y="6" data-a="45">
        </div>
        <div class="modulo" data-x="1" data-y="5" data-a="4">
        </div>
        <div class="modulo" data-x="2" data-y="5" data-a="14">
        </div>
        <div class="modulo" data-x="3" data-y="5" data-a="24">
        </div>
        <div class="modulo" data-x="4" data-y="5" data-a="34">
        </div>
        <div class="modulo" data-x="5" data-y="5" data-a="44">
        </div>
        <div class="modulo" data-x="1" data-y="4" data-a="3">
        </div>
        <div class="modulo" data-x="2" data-y="4" data-a="13">
        </div>
        <div class="modulo" data-x="3" data-y="4" data-a="23">
        </div>
        <div class="modulo" data-x="4" data-y="4" data-a="33">
        </div>
        <div class="modulo" data-x="5" data-y="4" data-a="43">
        </div>
        <div class="modulo" data-x="1" data-y="3" data-a="2">
        </div>
        <div class="modulo" data-x="2" data-y="3" data-a="12">
        </div>
        <div class="modulo" data-x="3" data-y="3" data-a="22">
        </div>
        <div class="modulo" data-x="4" data-y="3" data-a="32">
        </div>
        <div class="modulo" data-x="5" data-y="3" data-a="42">
        </div>
        <div class="modulo" data-x="1" data-y="2" data-a="1">
        </div>
        <div class="modulo" data-x="2" data-y="2" data-a="11">
        </div>
        <div class="modulo" data-x="3" data-y="2" data-a="21">
        </div>
        <div class="modulo" data-x="4" data-y="2" data-a="31">
        </div>
        <div class="modulo" data-x="5" data-y="2" data-a="41">
        </div>
      </div>
    </section>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

如果為主容器切換到網格而不是 flex，您將獲得更好的大小控制（網格是二維的，flex 是 1）。

您可以將網格設定為 5x9，并使用縱橫比確保每個單元格都是方形的。

然后，如果你給每個劍元素一個類劍，等等，你可以告訴系統每種型別的專案要占用多少列或行。兩個方向的默認值都是 1，因此您不必指定。

.box5x9 {
  width: 300px;
  aspect-ratio: 5 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(9, 1fr);
  justify-content: center;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

.sword {
  grid-row: span 2;
}

<div class="card-bod">
  <section class="grilla">
    <div class="box5x9">
      <div class="modulo sword" data-x="1" data-y="10" data-a="9"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div class="modulo helmet" data-x="2" data-y="10" data-a="19"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?"></div>
      <div class="modulo helmet" data-x="3" data-y="10" data-a="29"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div class="modulo helmet" data-x="4" data-y="10" data-a="39"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div class="modulo sword" data-x="5" data-y="10" data-a="49"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div class="modulo" data-x="1" data-y="9" data-a="8"></div>
      <div class="modulo" data-x="2" data-y="9" data-a="18"></div>
      <div class="modulo" data-x="3" data-y="9" data-a="28"></div>
      <div class="modulo" data-x="4" data-y="9" data-a="38"></div>
      <div class="modulo" data-x="5" data-y="9" data-a="48"></div>
      <div class="modulo" data-x="1" data-y="8" data-a="7"></div>
      <div class="modulo" data-x="2" data-y="8" data-a="17"></div>
      <div class="modulo" data-x="3" data-y="8" data-a="27"></div>
      <div class="modulo" data-x="4" data-y="8" data-a="37"></div>
      <div class="modulo" data-x="5" data-y="8" data-a="47"></div>
      <div class="modulo" data-x="1" data-y="7" data-a="6"></div>
      <div class="modulo" data-x="2" data-y="7" data-a="16"></div>
      <div class="modulo" data-x="3" data-y="7" data-a="26"></div>
      <div class="modulo" data-x="4" data-y="7" data-a="36"></div>
      <div class="modulo" data-x="5" data-y="7" data-a="46"></div>
      <div class="modulo" data-x="1" data-y="6" data-a="5"></div>
      <div class="modulo" data-x="2" data-y="6" data-a="15"></div>
      <div class="modulo" data-x="3" data-y="6" data-a="25"></div>
      <div class="modulo" data-x="4" data-y="6" data-a="35"></div>
      <div class="modulo" data-x="5" data-y="6" data-a="45"></div>
      <div class="modulo" data-x="1" data-y="5" data-a="4"></div>
      <div class="modulo" data-x="2" data-y="5" data-a="14"></div>
      <div class="modulo" data-x="3" data-y="5" data-a="24"></div>
      <div class="modulo" data-x="4" data-y="5" data-a="34"></div>
      <div class="modulo" data-x="5" data-y="5" data-a="44"></div>
      <div class="modulo" data-x="1" data-y="4" data-a="3"></div>
      <div class="modulo" data-x="2" data-y="4" data-a="13"></div>
      <div class="modulo" data-x="3" data-y="4" data-a="23"></div>
      <div class="modulo" data-x="4" data-y="4" data-a="33"></div>
      <div class="modulo" data-x="5" data-y="4" data-a="43"></div>
      <div class="modulo" data-x="1" data-y="3" data-a="2"></div>
      <div class="modulo" data-x="2" data-y="3" data-a="12"></div>
      <div class="modulo" data-x="3" data-y="3" data-a="22"></div>
      <div class="modulo" data-x="4" data-y="3" data-a="32"></div>
      <div class="modulo" data-x="5" data-y="3" data-a="42"></div>
      <div class="modulo" data-x="1" data-y="2" data-a="1"></div>
      <div class="modulo" data-x="2" data-y="2" data-a="11"></div>
      <div class="modulo" data-x="3" data-y="2" data-a="21"></div>
      <div class="modulo" data-x="4" data-y="2" data-a="31"></div>
      <div class="modulo" data-x="5" data-y="2" data-a="41"></div>
    </div>
  </section>
</div>

您將必須考慮您希望其他專案如何顯示 - 網格將在找到可用空間時填滿。為了獲得更多控制，您可以查看 grid-template-areas，它允許您命名區域并精確地繪制整個網格。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403302.html

標籤：

上一篇：我添加了一個下拉導航，現在其他內容繼續在下拉選單中

下一篇：ReactNative中的字體大小回應