위젯 같은 디자인의 Css 포지셔닝/반응 형 디자인

Question

나는 현재 This을 가지고 있는데, 이는 내 '위젯 뷰 탱크'의 일부가 될 것입니다. 나는 스타일을 원하는/유사하게 내 디자인을 포맷 : 나는 내 탱크의 모양을 createed 한 방식 때문에 여기 내부 레이아웃에 문제가 있어요

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

내가 분명히 라인의 필요성에 뭔가를하고 있어요

현재이 달성에 나옵니다.

모든 도움을 주시면 감사하겠습니다.

위젯의

높이은 변경 가능성이 있습니다.

그러나, 폭이 내가하고 싶은 무엇

(따라서 %의 대신 픽셀의의 사용) 화면의 폭에 따라 수 있습니다 것은 반응 디자인처럼

테이블은 실제로 이미 많은 스타일링을 수행하는 KendoGrid가 될 것입니다.

linked question

어디는 ​​암시 (절대) 위치 결정 소자에 변환을 적용하여, 모든 이러한 동적

Answer 1

먼저하게 찾고. 따라서 컨테이너와 프레임 요소에는 설정된 높이가 없으므로 테이블을 배치하기 위해 줄 바꿈을 추가해야했습니다. 위젯에 대한 고정 된 높이를 가지고 있기 때문에

해당 테이블의 절대 위치를 설정할 수

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

그다음 탱크 자체이다. 위젯의 너비는 상대적으로 설정되지만 (40 %) 개별 스트립의 translateZ 및 width 값은 고정됩니다.

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

이 두 값은 실제로 원통형 객체를 렌더링하는 데 중요하지만 고정 값으로 인해 아주 잘 적응하지 못합니다. 주요 문제는 누락 된 z 축 참조로 상대 단위 인 translateX(100%) 또는 심지어 translateY(calc(50% + 15px))이 제대로 작동하지 않지만 translateZ()의 경우는 그렇지 않습니다.

간단히 말해서, imho pure CSS는 현재 반응 형 방식으로 탱크를 렌더링하도록 허용하지 않습니다. 위젯의 실제 너비 (절대 값)를 얻고 각 스트립의 값을 계산하려면 javascript가 필요할 것입니다.

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 (만 웹킷 용으로 작성)를 참조하십시오 :이이 같은 기능을 수행 할 수 있습니다 (이 만 webkitTransform을 설정, 당신은뿐만 아니라 다른 접두사 것을 할 필요) 창 크기를 조정하십시오. 또한 회전하는 애니메이션을 중심으로 탱크를 만들기 위해 변형 값 중 상당 부분을 조정했습니다 (탱크를 가져 가거나 시도하십시오). started automatically).