html - 如何使用 CSS 和 HTML 创建不同大小图像的响应式网格，示例如下

Question

我正在尝试创建一个包含不同尺寸照片网格的 Pixel Perfect 响应式页面。我想知道最好的方法是什么？我用 float 列表来做这个吗？ float 元素不在列表中？？

我真的不知道。下面是两张图片，显示了全宽(1200 像素)和缩小宽度(768 像素)的布局。我了解如何更改容器宽度并使用媒体查询删除元素，但我不知道如何获得我想要的外观。我使用列吗？？

Full Width http://www.letsboogey.com/stackimages/1.jpg

768 Width http://www.letsboogey.com/stackimages/2.jpg

Answer 1

对于1200px 设备，您可以创建3 列 li 或div，并将图像即A、G 和H 放在第一列 ; 中间栏的 B 和 C； 第三列/最后一列中的 E、F、D、I 和 J。使用所需的 css 属性并根据网格布局修复图像。

对于 768px 设备，最好的办法是使用 CSS 属性(如 Top、Left、Right 和 Bottom) 相对/绝对定位图像 . 因为您不必更改 HTML 布局。

我在这里为 768px 布局制作了一个DEMO:

.wrapper {
  position: relative;
  width: 1200px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper * {
  position: absolute;
  border: 2px solid #000;
}
.aaa {
  left: 0;
  top: 0;
  width: 598px;
  height: 700px;
}
.bbb {
  left: 600px;
  top: 0;
  width: 598px;
  height: 200px;
}
.ccc {
  left: 600px;
  top: 202px;
  width: 598px;
  height: 596px;
}
.ggg {
  left: 0;
  top: 702px;
  width: 298px;
  height: 96px;
}
.eee {
  left: 300px;
  top: 702px;
  width: 298px;
  height: 96px;
}
.ddd {
  left: 0px;
  top: 800px;
  width: 598px;
  height: 200px;
}
.iii {
  left: 600px;
  top: 800px;
  width: 298px;
  height: 200px;
}
.fff {
  left: 900px;
  top: 800px;
  width: 298px;
  height: 200px;
}

<ul class="wrapper">
  <li class="aaa">A</li>
  <li class="bbb">B</li>
  <li class="ccc">C</li>
  <li class="ggg">G</li>
  <li class="eee">E</li>
  <li class="ddd">D</li>
  <li class="iii">I</li>
  <li class="fff">F</li>
</ul>