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

【问题标题】：Finding it difficult to achieve photo grid layout发现难以实现照片网格布局
【发布时间】：2018-03-20 00:03:28
【问题描述】：

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

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

这是我的代码

.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;
}

<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>

【问题讨论】：

SO 不是代码编写服务。表现出你自己的努力，如果你不能让它发挥作用，就回来。这是一个很好的阅读stackoverflow.com/help/mcve
@LGSon 你现在看到我以前的努力了

标签： html image css grid flexbox

【解决方案1】：

我不确定您希望它的响应速度如何。我会为前 3 张图片创建一个 div 元素，为底部 3 张创建另一个元素。将第一张图片的大小设置为比其他图片更高的比例并将它们向左浮动。

【讨论】：

【解决方案2】：

这是你要找的吗？

.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>

【讨论】：

【解决方案3】：

您可以尝试使用 twitter bootstrap 并将不同的高度附加到盒子上。 W3Schools 有使用教程：https://www.w3schools.com/bootstrap/

【讨论】：

将库/插件用于较小且单一的目的是一种开销。
我明白了。但它也可能有助于其他页面的布局。我将引导程序与@media 查询一起用于响应式网页设计
使用其他方法之一会更容易。只是想我会换一个选择
我认为这样的网格布局在 bootstrap 中是不可能的，而且 bootstrap 的网格系统也会使网格元素在较低的屏幕分辨率上表现得像块。这将与问题完全不同。
如果你绝对定位它们，我认为你可以，但这将是不必要的工作