网格布局与图像
问题描述：
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.
答
我使用浮动和 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>