Ordnen Sie die Bilder in einem 2x1x2x1x2-Layout an

Question

Ich möchte die Bilder wie im Bild gezeigt in einem 2x1x2x1x2-Rasterformat ausrichten, aber dann wiederholen sich die Bilder und ich weiß anscheinend nicht, wie ich sie so hinbekomme. Ich bin nicht sehr vertraut mit der Funktionsweise von Rastern und kann es anscheinend auch nicht verstehen. Ich habe sie flexibel gemacht und es mit der Position: definitiv und so ein wenig durcheinander gebracht, aber sie werden entweder ganz oben auf meiner Seite angezeigt, wo sich meine Navigation und so befindet. Soweit ich jetzt habe, sind alle Bilder aneinandergeklebt, was in Ordnung ist, aber nur in einer Spalte.

Der folgende Code wird mit weiteren Bildern im gleichen Format fortgesetzt.

img {
  width: 50%;
}

#img-layout {
  display: flex;
}

.img-lion {
  float: left;
}

.img-water {
  float: right;
}

<div class="container-images">
  <div class="img-lion" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1459800606415-5B8BDTCZ866H7OTNQMYL/portrait-black.jpg?format=1500w" alt="" />
  </div>
  <div class="img-water" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452896039354-F8P5FPCM3V9HMWHWZ0FE/main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-pedestal" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1456767403805-KN8Z62OADRLLPKN8YA4P/nytimes-main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-berlin" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1453940592760-5OWKFJCJKG133RHSDOMK/main.jpg?format=1000w" alt="" />
  </div>
  <div class="img-dome" id="img-layout">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452634113588-M32DA4VU1QCEBLOKWCBV/main.jpg?format=1500w" alt="" />
  </div>
</div>

Wie gesagt, ich habe mit einigen Optionen wie Float-Werten und elastischer Skalierung herumgespielt, aber ich kann anscheinend nicht herausfinden, wie es funktioniert. Ich habe im Internet nachgeschaut, aber entweder verstehe ich es nicht ganz oder es scheint nicht zu funktionieren. Ich hoffe, jemand kann helfen

Answer 1

使用网格可以很容易地做到这一点。我在下面给出了一个示例，并对每个相关部分进行了注释，以解释其工作原理。

此外，每个 id 属性都应该是唯一的。

.container-images {
  /* set up a grid */
  display:grid;
  
  /* tell it that we want 2 columns and each column is equal width */
  grid-template-columns: repeat(2, 1fr);
}

img {
  /* make the image fill the entire container then clip the image as best the browser can to fill it */
  width: 100%;
  height:100%;
  object-fit: cover;
}

.container-images > div:nth-child(3n+3) {
  /* every 3rd element start the image at the left hand track but span the two columns */
  grid-column: 1 / span 2;
}