1

我已经通过尝试修改 jquery 条形图或 mansonary 或 svg 等搜索并提出了多个“伪解决方案”，但我想我只想问是否有人对我有更好的解决方案。请。

我需要创建一个堆叠计划，以显示建筑物中的租户每层使用的空间大小或百分比。我在下面通过 jpg 包含了一个简单示例的链接。我需要通过租约到期对其进行着色并使其动态化 - 单击块并传递 id 变量。我只是不认为 css 块浮动是最容易应用的，但我可能是错的。

块图像

例子就是最好的解释。我认为乐高积木问题很接近。

4

1 回答 1

0

使用纯 HTML 不是更简单吗？沿着这条线：

<html>
  <head>
    <title></title>
    <style type="text/css">
      .floorName, .suites, .suite {display:inline-block}
      .floorName  {width:100px}
      .suites     {
        width:500px;
        height:100%;
      }
      .suite      {
        position:relative;
        color:white; 
        background-color:#FF9934;
        text-align:center;
        height:100%;
      }
      /* This draws the border around the suites */
      .suite:before {
        content:"";
        position:absolute;
        display:block;
        width:100%;
        height:100%;
        border:1px solid black;
        top:-1px;
        left:-1px;
      }
      .expire2012 {background-color:#3266CC}
      .expire2013 {background-color:#FE0000}
      .expire2014 {background-color:#99CC67}
      .expire2015 {background-color:#00FF01}
      .expire2016 {background-color:#993400}
    </style>
  </head>
  <body>
    <div class="floor">
      <div class="floorName">Floor 12</div>
      <div class="suites">
        <div style="width:100%" class="suite expire2012">Suite 1200</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 11</div>
      <div class="suites">
        <div style="width:40%" class="suite">Suite 1100</div
        ><div style="width:40%" class="suite">Suite 1110</div
        ><div style="width:20%" class="suite expire">Suite 1120</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 10</div>
      <div class="suites">
        <div style="width:100%" class="suite expire2013">Suite 1000</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 9</div>
      <div class="suites">
        <div style="width:40%" class="suite expire2016">Suite 900</div
       ><div style="width:60%" class="suite expire2014">Suite 910</div>
      </div>
    </div>
  </body>
</html>
于 2012-12-01T22:07:57.177 回答