使图像网格像Tumblr模板

Question

很抱歉这个愚蠢的问题，但我如何使用HTML和CSS制作像Tumblr这样的图像或文本网格？ 好吧，我的意思是这样的：

Answer 1

这是一个非常广泛的问题，但这是一个让你前进的基本例子。你应该使用一些浮动的列，每个列都有盒子。

演示 - http://codepen.io/anon/pen/MYQjvQ

HTML：

<div class="wrapper">
  <div class="col">
    <div class="block">
    </div>
    <div class="block-l">
    </div>
    <div class="block">
    </div>
    <div class="block-l">
    </div>
  </div>
  <div class="col col-last">
    <div class="block-l">
    </div>
    <div class="block">
    </div>
    <div class="block-l">
    </div>
    <div class="block">
    </div>
  </div>
</div>
<div style="cf"></div>

CSS：

.wrapper{
  width: 1000px;
  margin: 0 auto;
}

.col {
  float: left;
  width: 49%;
}

.block {
  width: 100%;
  height: 110px;
  background: #ccccff;
  margin-bottom: 20px;
}

.block-l {
  width: 100%;
  height: 180px;
  background: #ccccff;
  margin-bottom: 20px;
}

.col-last {
  float: right!important;
}

.cf {
  clear: both;
}