html - Widget 类设计中的 Css 定位/响应式设计

Question

我目前有 This其中将成为我的“坦克小部件 View ”的一部分。我希望将我的设计样式/格式设置为类似于:

+------------------------------------------+
| HEADER                                 X |
+------------------------------------------+
|  ______________________________________  |
| <______________________________________> |
|  |                % full              |  |
|  |                                    |  |
|  |WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW|  |  <-- tank fills its container, should be centered  
|  |       O         o       O          |  |      hoz. shouldn't overflow box
|  ___________o_____________________O____  |
| <______________________________________> |
|                                          |
|  +------------------------------------+  |
|  |                                    |  |
|  |             TABULAR DATA           |  |
|  |                here                |  |  <-- table has 100% width (working)
|  |                                    |  |
|  +------------------------------------+  |
+------------------------------------------+
| FOOTER                                   |
+------------------------------------------+

我这里的内部布局有问题，由于我创建坦克形状的方式，很难将它放在页面顶部。

我如何创建像上面这样的布局，其中水箱和 table 填满了小部件的主要部分，并且“小部件的包含墙”没有重叠？

     .tankWidget {
       position: relative;
       width: 45%;
       height: 400px;
       float: left;
       background-color: #c4c4c4;
       margin: 1.5%;
     }
     .banner {
       min-height: 40px;
       width: 100%;
       background-color: #383838;
       color: #ececec;
       margin: 0;
     }
     .widget-footer {
       min-height: 40px;
       width: 100%;
       background-color: #383838;
       bottom: 0;
       position: absolute;
       color: #ececec;
     }
     #container {
       margin: 0;
       margin-top: -50px;
       width: 100%;
       padding: 0;
       -moz-perspective: 1000px;
       /*required to make cylinder shape*/
       -webkit-perspective: 1000px;
     }
     #frame {
       -moz-transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px, 70px, 50px);
       -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px, 70px, 50px);
     }
     .strip {
       -moz-transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
     }
     .strip div {
       position: fixed;
       background: blue;
       background-repeat: repeat;
       border-width: thin 10px;
       height: 120px;
       /*height and width of tank display*/
       width: 34px;
     }
     .strip div:before {
       border-bottom: 2px solid black;
       content: "";
       position: absolute;
       z-index: -1;
       /*Make this lower so any text appears in front*/
       top: 0;
       right: 0;
       bottom: 50%;
       /*used for tank level setting*/
       left: 0;
       background: green;
     }
     .strip .a {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(0deg) translateZ(124px);
       -webkit-transform: rotateY(0deg) translateZ(124px)
     }
     .strip .b {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(15deg) translateZ(124px);
       -webkit-transform: rotateY(15deg) translateZ(124px)
     }
     .strip .c {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(30deg) translateZ(124px);
       -webkit-transform: rotateY(30deg) translateZ(124px);
     }
     .strip .d {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(45deg) translateZ(124px);
       -webkit-transform: rotateY(45deg) translateZ(124px)
     }
     .strip .e {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(60deg) translateZ(124px);
       -webkit-transform: rotateY(60deg) translateZ(124px)
     }
     .strip .f {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(75deg) translateZ(124px);
       -webkit-transform: rotateY(75deg) translateZ(124px)
     }
     .strip .g {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(90deg) translateZ(124px);
       -webkit-transform: rotateY(90deg) translateZ(124px)
     }
     .strip .h {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(105deg) translateZ(124px);
       -webkit-transform: rotateY(105deg) translateZ(124px)
     }
     .strip .i {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(120deg) translateZ(124px);
       -webkit-transform: rotateY(120deg) translateZ(124px)
     }
     .strip .j {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(135deg) translateZ(124px);
       -webkit-transform: rotateY(135deg) translateZ(124px)
     }
     .strip .k {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(150deg) translateZ(124px);
       -webkit-transform: rotateY(150deg) translateZ(124px)
     }
     .strip .l {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(165deg) translateZ(124px);
       -webkit-transform: rotateY(165deg) translateZ(124px)
     }
     .strip .m {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(180deg) translateZ(124px);
       -webkit-transform: rotateY(180deg) translateZ(124px)
     }
     .strip .n {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(195deg) translateZ(124px);
       -webkit-transform: rotateY(195deg) translateZ(124px)
     }
     .strip .o {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(210deg) translateZ(124px);
       -webkit-transform: rotateY(210deg) translateZ(124px)
     }
     .strip .p {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(225deg) translateZ(124px);
       -webkit-transform: rotateY(225deg) translateZ(124px)
     }
     .strip .q {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(240deg) translateZ(124px);
       -webkit-transform: rotateY(240deg) translateZ(124px)
     }
     .strip .r {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(255deg) translateZ(124px);
       -webkit-transform: rotateY(255deg) translateZ(124px)
     }
     .strip .s {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(270deg) translateZ(124px);
       -webkit-transform: rotateY(270deg) translateZ(124px)
     }
     .strip .t {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(285deg) translateZ(124px);
       -webkit-transform: rotateY(285deg) translateZ(124px)
     }
     .strip .u {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(300deg) translateZ(124px);
       -webkit-transform: rotateY(300deg) translateZ(124px)
     }
     .strip .v {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(315deg) translateZ(124px);
       -webkit-transform: rotateY(315deg) translateZ(124px)
     }
     .strip .w {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(330deg) translateZ(124px);
       -webkit-transform: rotateY(330deg) translateZ(124px)
     }
     .strip .x {
       border-top: 1px solid black;
       border-bottom: 1px solid black;
       -moz-transform: rotateY(345deg) translateZ(124px);
       -webkit-transform: rotateY(345deg) translateZ(124px);
     }

<div class="tankWidget">
  <div class="banner">Tank 1: Kero</div>

  <div id="container">
    <div id="frame">
      <div class="strip">
        <div class="a">50% Full</div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="f"></div>
        <div class="g"></div>
        <div class="h"></div>
        <div class="i"></div>
        <div class="j"></div>
        <div class="k"></div>
        <div class="l"></div>
        <div class="m"></div>
        <div class="n"></div>
        <div class="o"></div>
        <div class="p"></div>
        <div class="q"></div>
        <div class="r"></div>
        <div class="s"></div>
        <div class="t"></div>
        <div class="u"></div>
        <div class="v"></div>
        <div class="w"></div>
        <div class="x"></div>
      </div>
    </div>
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <table id="specTab1">
    <tr>
      <th>Volume:</th>
      <td>50L</td>
    </tr>
    <tr>
      <th>Capacity:</th>
      <td>100L</td>
    </tr>
    <tr>
      <th>Ullage (AL):</th>
      <td>1.24</td>
    </tr>
    <tr>
      <th>
        <br />
      </th>
    </tr>
  </table>
  <div class="widget-footer"></div>
</div>

我显然在需要换行符以实现当前目标方面做错了什么。

如有任何帮助，我们将不胜感激。

请注意

小部件的高度不太可能改变。但是，宽度可能取决于屏幕的宽度(因此使用 % 而不是 px)

我想要的是一个响应式设计，例如:

表格实际上将是一个 KendoGrid，其中已经为它做了很多样式。

linked question我希望使它充满活力

Answer 1

首先，通过对元素应用转换，您可以隐式(绝对)定位。因此，由于容器和框架元素没有设置高度，您需要添加额外的换行符来定位表格。

因为小部件的高度是固定的，所以可以在该表上设置绝对位置:

#specTab1 {
    position: absolute;
    bottom: 50px; // to leave space for the 40px footer
}

接下来是坦克本身。小部件的宽度设置为相对 (40%)，但单个 strip 的 translateZ 和宽度值是固定的。

.strip div {
    ...
    width:34px;
    ...
}
.strip .a {
    ...
    transform: rotateY(0deg) translateZ(124px);
    ...
}

这两个值对于实际渲染圆柱形对象当然很重要，但是由于固定值，这不能很好地适应。主要问题是缺少 z 轴引用，它不允许您使用相对单位，translateX(100%) 甚至 translateY(calc(50% + 15px))工作正常，但 translateZ() 并非如此。

长话短说，恕我直言，纯 CSS 目前不允许您以响应方式渲染您的坦克。您很可能需要 javascript 来获取小部件的实际宽度(以绝对数字表示)并计算每个 strip 的值。这可以通过这样的函数来完成(这只会设置 webkitTransform，您也需要为其他前缀执行此操作):

    function resize3d() {
        var container = document.getElementById('container');
        w = container.offsetWidth / 10;
        z = container.offsetWidth / 30 * 11;
        var grad = 0;
        var alphabet = "abcdefghijklmnopqrstuvwx";
        for(var i=0; i<alphabet.length; i++)
        {
            var letter = alphabet.charAt(i);
            var el = document.querySelector(".strip ."+letter);
            el.style.width = w+"px";
            el.style.webkitTransform = "rotateY("+grad+"deg) translateZ("+z+"px)";
            grad += 15;
        }
    }

请参阅 DEMO (只为 webkit 编写)并调整窗口大小。我还调整了相当多的变换值，使坦克或多或少地以旋转动画为中心(尝试将坦克悬停!;)或获取它 started automatically ).