javascript - 制作像 Tumblr 模板一样的图像网格

Question

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

Answer 1

这是一个非常宽泛的问题，但这里有一个基本的例子可以让你开始。您应该使用一些 float 列，每个列中都有框。

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