Css定位/响应式设计在类似Widget的设计中
我目前有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>
我显然对于目前实现此目的的换行需要做错了。
这里非常感谢任何帮助。
请注意
小部件的高度不太可能改变。但是，宽度可能取决于屏幕的宽度（因此使用％而不是px）
我想要的是响应式设计，例如：
Table实际上将成为一个KendoGrid，其中已经有很多样式。
linked question我希望能够实现这一动态
1 个答案:
答案 0 :(得分：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()不是这种情况。< / p>
长话短说，imho pure 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编写）并调整窗口大小。我还调整了相当多的变换值，使坦克或多或少地为旋转动画居中（尝试悬停坦克！;）或得到它started automatically。）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？