html - 带图像的网格布局

Question

我正在尝试使用 HTML 和 CSS 为图像构建此网格布局。

我想使用 div 而不是 table，但我不确定最好的方法是什么。另外，我需要在每张图片下方添加简短的描述。

Answer 1

我使用 float 和 padding-bottom 制作了这个简单的响应式布局。

底部填充用于模拟元素的高度。

这对您来说可能是一个良好的开始。如果您想进一步了解更多信息，例如在这些方 block 内添加响应式图像/文本，我建议您查看 grid of responsive squares 。它详细描述了一种实现具有居中内容的响应式正方形网格的方法。

div {
  float: left;
}
div > div {
  background: #2C3E50;
}
#big_wrap, #small_wrap {
  width: 50%;
}
#big_wrap > div {
  width: 48%;
  padding-bottom: 48%;
  margin: 1%;
}
#small_wrap > div {
  width: 31.333%;
  padding-bottom: 31.333%;
  margin: 1%;
}

<div id="big_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="small_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

FIDDLE