Grid layout with images

问题

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

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.

回答1:

I made up this simple responsive layout using floats and 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

回答2:

Use this layout:-

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;
}

来源：https://stackoverflow.com/questions/23150850/grid-layout-with-images

标签

html

css

responsive-design

grid-layout