如何安排这样的图像？

Question

我正在尝试安排下图所示的图片？我已经尝试向左浮动，但它没有显示如下图所示。

Answer 1

CSS无法做到，你需要JavaScript。

具体为jQuery，然后是jQuery Masonry。

或者，如果您更喜欢坚持使用原始JavaScript，则可以使用Vanilla Masonry。

查看图片演示：http://masonry.desandro.com/demos/images.html

Answer 2

纯CSS，在Internet Explorer，Firefox和Opera中测试：

<style type="text/css">
  /*<![CDATA[*/
    .A {
      float: left;
      margin: 0px 6px 0px 0px;
    }
    .A1 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 74px;
      margin: 0px 0px 6px 0px;
    }
    .A2 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 83px;
      clear: left;
    }

    .B {
      float: left;
      margin: 0px 6px 0px 0px;
    }
    .B1 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 47px;
      margin: 0px 0px 6px 0px;
    }
    .B2 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 126px;
      clear: left;
    }

    .C {
      float: left;
      margin: 0px 6px 0px 0px;
    }
    .C1 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 107px;
      margin: 0px 0px 6px 0px;
    }
    .C2 {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 49px;
      clear: left;
    }

    .D {
      float: left;
      margin: 0px 6px 0px 0px;
    }
    .D1 {
      border: 1px solid black;
      float: left;
      width: 316px;
      height: 60px;
      margin: 0px 0px 6px 0px;
    }
    .D2 {

    }
    .D2A {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 86px;
      clear: left;
      margin: 0px 6px 6px 0px;
    }
    .D2B {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 116px;
      margin: 0px 6px 6px 0px;
    }
    .D2C {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 131px;
      margin: 0px 0px 6px 0px;
    }

    .E {
      border: 1px solid black;
      float: left;
      width: 100px;
      height: 202px;
    }
  /*]]>*/
</style>

<div class="A">
  <div class="A1">
    A1
  </div>
  <div class="A2">
    A2
  </div>
</div>
<div class="B">
  <div class="B1">
    B1
  </div>
  <div class="B2">
    B2
  </div>
</div>
<div class="C">
  <div class="C1">
    C1
  </div>
  <div class="C2">
    C2
  </div>
</div>
<div class="D">
  <div class="D1">
    D1
  </div>
  <div class="D2">
    <div class="D2A">
      D2
    </div>
    <div class="D2B">
      D3
    </div>
    <div class="D2C">
      D4
    </div>
  </div>
</div>
<div class="E">
  E
</div>