Css 如何安排像这样的图像？

我正试着整理像下图这样的图片？我已经尝试向左浮动，但它没有显示为下图

---

CSS做不到，你需要JavaScript

具体来说，然后

或者，如果您更喜欢使用原始JavaScript，可以使用

---

请看图片演示：

纯CSS，在Internet Explorer、Fire Fox和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>

/**/
A1
A2
地下一层
地下二层
C1
C2
D1
D2
D3
D4
E

您可以使用嵌套的

表格将整个布局分隔在
表格
中

这不是最好的解决方案，但它是一个很好的解决方案，与图：D完全相同。不幸的是，这张图片显然只是一个例子：实际图片的宽度/高度可能完全不同。好吧，三十点，改变数字！这只花了几分钟就完成了，而且，很明显，这并不像其他海报所说的那样是不可能的。