所以我想把我的图像对齐成2x1x2x1x2的网格格式,就像图中所示的那样,但是图像重复了,但是我似乎不知道如何让它们像这样。我不是很熟悉网格是如何工作的,我似乎也不知道。我让它们弯曲,并且在位置上做了一些改动:绝对和东西,但他们要么得到发送所有的方式到我的页面顶部,我的导航和东西是。与我现在所有的图像是坚持彼此这是好的,但它只是在一列。下面的代码继续与夫妇更多的图像相同的格式。
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>
所以正如我所说,我已经搞砸了一些选项,如浮动值,弹性比例,但我只是似乎不能弄清楚它是如何工作的。我在互联网上查找,但我不是真的理解它,或它似乎不工作。希望有人能帮助我
2条答案
按热度按时间rt4zxlrg1#
这在网格中是很容易做到的,我在下面的例子中和每个相关部分的注解中解释了它是如何工作的。
此外,每个id属性都应该是唯一的。
yqhsw0fo2#
这里有一个简单的解决方案,使用CSS flex属性,这是相当简单,易于处理: