html - 元素在文档中的位置不一致

Question

在文档的这一页上，我需要将图片在页面上乱七八糟地排列。我的方法是通过 top 调整每一个和 left百分比值。图形元素行为异常。 #num1根本不响应顶部，而 #num4需要极值才能起作用，但是 #num5做得很好。所有 6 #num具有相同的属性。 1-3 在 <div id="divA" class="row"> 下而 4-6 个在 <div id="divB" class="row"> 下

这是我的 CodePen 的链接。

http://codepen.io/WallyNally/pen/QEZKrV

这是我正在努力的模型。

如果您了解这些 figure 的原因这很困难，或者如果您有其他/改进的方法来做到这一点，请告诉我。

此外，一旦这些都安排好了，我计划添加脚本将 .on(mouseover) 推送非悬停的 figure远离悬停元素。如果有一种编写适合脚本处理的 html/css 的方法，那么您将获得加分。

Answer 1

我在这里创建了不改变框和图像格式的示例。因此，第一张图片仍将具有相同的格式:3:2。

• 框绝对定位到文档(左上角)，宽度也根据文档大小计算。
• box-border(s) 创建正确格式的框。
• image-wrapper(s) 为图像创建位置 - 它应该位于隐藏的 Angular 落。
• image-size(s) 创建正确的图像格式
• img 使用 object-fit，它不兼容所有浏览器。如果您正在寻找适合每个现代浏览器的东西，您可以使用背景 css 样式。还有一个很好的解决方法，如果您还需要用于 SEO 的 img 标签(找到解决方案 2):Is there an equivalent to background-size: cover and contain for image elements?

#boxes-wrapper {
  position: relative;
  width: 100%;
  padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
}
.box-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0 0 0 2px #5f2325;
  -moz-box-shadow: 0 0 0 2px #5f2325;
  -ms-box-shadow: 0 0 0 2px #5f2325;
  -o-box-shadow: 0 0 0 2px #5f2325;
  box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
  position: absolute;
  height: 0;
}
.image-size {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.image-size img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#box1 {
  top: 21.48%;
  left: 4.88%;
  width: 24.54%;
}
#box1 .box-border {
  padding-top: 67.96%;
}
#box1 .image-wrapper {
  bottom: -2.5%;
  left: -3.05%;
  width: 92.52%;
}
#box1 .image-size {
  padding-top: 66.46%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#box2 {
  top: 31.36%;
  left: 36%;
  width: 19%;
}
#box2 .box-border {
  padding-top: 67.8%;
}
#box2 .image-wrapper {
  top: -7.85%;
  left: -10.68%;
  width: 92.52%;
}
#box2 .image-size {
  padding-top: 66.54%;
}
#box4 {
  top: 54.67%;
  left: 1.42%;
  width: 24.61%;
}
#box4 .box-border {
  padding-top: 67.77%;
}
#box4 .image-wrapper {
  bottom: -11.38%;
  left: 10.74%;
  width: 66.94%;
}
#box4 .image-size {
  padding-top: 104.12%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

<div id="boxes-wrapper">
  <div id="box1">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box2">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box4">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x469/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
</div>

编辑:添加了 boxes-wrapper，因为第二行有问题。