带有图像的网格布局答案

【问题标题】：Grid layout with images带有图像的网格布局
【发布时间】：2014-06-02 18:29:03
【问题描述】：

我正在尝试为带有 HTML 和 CSS 的图像构建此网格布局。

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

【问题讨论】：

标签： html css responsive-design grid-layout

【解决方案1】：

我使用浮动和padding-bottom 组成了这个简单的响应式布局。

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

【讨论】：

谢谢！！这就是我一直在寻找的。span>
有没有办法可以在 small_wrap 中添加更多方块，以便将它们添加到右端？我想让它水平滚动。
@user3216026 这是可能的，但它改变了很多东西，你应该为此发布另一个问题并在 cmets 中发布指向它的链接，以便我可以找到它。
好的，我创建了一个新问题。这是链接stackoverflow.com/questions/23156598/…
@daylight 计算大小：每个元素占用的空间总和（宽度 + 左边距 + 右边距）必须等于 100% 才能填满它们的父元素。右侧小元素的示例： 3 * (31.333 + 1 + 1) ~= 100 。你也可以在grid of responsive squares和mosaic of images找到另一种解释

【解决方案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;
}

【讨论】：