设计

设计

关注
发信
关注(28)粉丝(399)

html - 类控件中的CSS定位/响应式设计

我现在有This这将是我的'坦克小部件视图的一部分。我希望我的设计风格/格式类似于：

+------------------------------------------+
| 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                                   |
+------------------------------------------+

我有内部布局的问题，在这里，由于我已经创建了我的坦克形状的方式，很难把它放在页面的顶部。
我怎样才能创建像上面这样的布局，在这个布局中，容器和表填满了小部件的主要部分，并且没有“小部件的包含墙”的重叠？
     .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>

很明显，我做了一些错事，需要换线来实现这一目标。
任何帮助在此将不胜感激。
请注意
小部件的高度不太可能改变。但是，宽度可能取决于屏幕的宽度（因此使用%s而不是px）
我想要的是一个反应灵敏的设计，比如：
这张桌子实际上是一个肯多格里德，其中做了很多造型已经为它。
linked question我想让这充满活力

最佳答案

首先，通过对元素应用转换，可以隐式（绝对）定位。因此，由于容器和框架元素没有设置的高度，因此需要添加额外的换行符来定位表。
由于小部件的高度是固定的，因此可以在该表上设置绝对位置：

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

接下来就是坦克本身。小部件的宽度是相对设置的（40%），但是单个条带的translateZ和宽度值是固定的。
.strip div {
    ...
    width:34px;
    ...
}
.strip .a {
    ...
    transform: rotateY(0deg) translateZ(124px);
    ...
}

这两个值对于实际渲染圆柱体对象当然很重要，但由于固定值的存在，这一点不太适合。主要问题是缺少Z轴参考，不允许使用相对单位，translateX(100%)或甚至translateY(calc(50% + 15px))工作精细，但这不是translateZ()的情况。
长话短说，imho纯CSS目前不允许您渲染您的坦克在一个响应的方式。您很可能需要javascript来获取小部件的实际宽度（绝对值），并计算每个条带的值。这可以通过这样的函数来实现（这只设置了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）并调整窗口大小。我还调整了相当多的变换值，使坦克或多或少为旋转动画中心（尝试悬停坦克！；）或者得到它。

08-06 02:27
Powered by LMLPHP ©2024 设计 0.031815