网格布局与图像 [英] Grid layout with images

问题描述

m尝试使用HTML和CSS为图片构建此网格布局。

I'm trying to build this grid layout for images with HTML and CSS.

我想使用div而不是表，但我不知道什么是最好的方式。

I would like to use divs rather than table but I'm not sure what's the best way to go. Also I need to put a short description below each image.

推荐答案

我使用浮动和<$ c构成了这个简单的响应式布局$ c> padding-bottom 。

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

The padding bottom is used to simulate the height of the elements.

您。如果您想要进一步了解，例如在广告中添加响应式图片/文字，建议您查看 响应方格网格 。

It can be a good start for you. If you want to go futher and learn more like for example add responsive images/text inside those squares, I advise you to check out grid of responsive squares. It descibes in detail a way to achieve a responsive grid of squares with centered content.

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

这篇关于网格布局与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！