Question

我发现难以实现这个确切的照片网格有关如何去做的任何想法？ enter image description here

为了澄清，我已经有了工作原型enter image description here，这是用flexbox完成的，但是有一个没有用，所以我不得不使用绝对位置，这在其他屏幕尺寸上显示时效果不佳。

Heres是我的代码

＆＃13;

.container-ed {
  padding: 0px 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}

.pic-ed {
  position: relative;
}

.pic-ar {
  position: absolute;
  right: 40px;
  margin-top: 280px;
}

.pic-ad {
  margin-top: 10px;
}

＆＃13;

<div class="container-ed">
      <img class="pic-ed" src="img/pic.svg" height="550" width="600">
     <!-- <img class="x-ed" src="img/ex-ed.svg"> -->
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
      <img class="pic-ar" src="img/Rectangle%20136.svg" height="250" width="300">

    </div>

＆＃13;

Answer 1

这是你要找的吗？

.photo-grid {
    width: 400px;
    height: 400px;
}
.grid {
    display: inline-block;
    vertical-align: top;
    float: left;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #aaa;
    background-color: #eee;
}
.grid:before {
    content: attr(data-label);
    position: absolute;
    top: 3px;
    left: 3px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0px 0px 1px #000;
    font-size: 2rem;
    font-family: sans-serif;
}
.grid.small {
    width: 33.3%;
    height: 33.3%;
}
.grid.medium {
    width: 66.6%;
    height: 66.6%;
}
.grid.right {
    float: right;
}

<div class="photo-grid">
    <div class="grid medium" data-label="1"></div>
    <div class="grid small" data-label="2"></div>
    <div class="grid small" data-label="3"></div>
    <div class="grid small right" data-label="4"></div>
    <div class="grid small right" data-label="5"></div>
    <div class="grid small right" data-label="6"></div>
</div>

Answer 2

我不确定你想要的反应如何。我会为前3张图片制作一个div元素，为底部3制作另一张图片。将第一张图片的大小设置为比其他图片更高的比例并将它们向左浮动。

Answer 3

您可以尝试使用Twitter bootstrap并在框中添加不同的高度。 W3Schools有一个如何使用它的教程：https://www.w3schools.com/bootstrap/

发现难以实现照片网格布局

3 个答案: