带图像的网格布局

Question

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

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

Answer 1

我使用浮点数和padding-bottom构建了这个简单的响应式布局。

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

这对你来说是一个好的开始。如果你想进一步了解更多，例如在这些方块中添加响应式图像/文字，我建议你查看 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

Answer 2

使用此布局： -

HTML

<div class="main">

<div class="child">
    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>

    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>
</div>

<div class="child">
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
</div>

CSS

.main {
width:100%;
float:left;
height:1%;
}
.child {
    width:50%;
    float:left;
}
.four {
    width: 96%;
    float:left;
    height: 150px;
    background:#35a;
    margin: 2% 0;
}
.nine {
    width:96%;
    float:left;
    height: 100px;
    background:#35a;
    margin: 2% 0;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:33%;
    float:left;
}