如何将<div>集中在其他几个<div>s中(使用w3.css和css的混合物)
如何将<div>集中在其他几个<div>s中(使用w3.css和css的混合物)
提问于 2016-10-28 11:17:31
我使用w3-css和bog-标准css。
我有一个词:灵感，它的文字是透明的。字母后面是彩色长方形。在彩色矩形的前面是白色的长方形，它们给人的印象是激励字母被填满，这取决于长方形达到多高。示例(在链接下)将白色矩形设置为50%的高度。在最初的版本中，这些高度是由从数据库中提取的数字决定的，而不是在脚本中设置它们的方式。
因此，激励的填充发生在以下情况：
有一个名为w3-第三的'w3 div‘，里面有另一个名为w3卡的div，其中是一个普通的div样式的头-调用回，在这个里面有每个字母块的div，最后一个div用于激励png。我使用z值，所以png位于顶部。
我不能为我的生活得到激励的形象坐在中央w3卡div。
如果我能挥动一根魔杖，我就会把#back div‘对准’。我试过设定宽度..。
#back {
position: absolute;
width: 294px;
margin: 0 auto;
z-index: 0;
}但这没什么区别。
拜托，在我的头爆炸之前请帮帮我.
下面是链接的完整页面代码：
<html>
<head>
<title>
INSPIRE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
#back {
position: absolute;
width: 294px;
margin: 0 auto;
z-index: 0;
}
#behindI {
position: absolute;
left: 0px;
z-index: 1;
}
#behindN {
position: absolute;
left: 33px;
z-index: 1;
}
#behindS {
position: absolute;
left: 80px;
z-index: 1;
}
#behindP {
position: absolute;
left: 113px;
z-index: 1;
}
#behindII {
position: absolute;
left: 160px;
z-index: 1;
}
#behindR {
position: absolute;
left: 200px;
z-index: 1;
}
#behindE {
position: absolute;
left: 247px;
z-index: 1;
}
#front {
position: absolute;
z-index: 3;
}
#myCanvasI {
z-index: 2;
}
</style>
<script>
var i = 0.5;
var n = 0.5;
var s = 0.5;
var p = 0.5;
var ii = 0.5;
var r = 0.5;
var e = 0.5;
</script>
</head>
<body>
<div class="w3-third">
<div class="w3-card-2 w3-padding-top w3-black w3-center" style="min-height:460px">
<h3>Characteristics of Learning</h3><br>
<p>How are you doing in each area? </p>
<p>Are you the full INSPIRE? </p>
<div id="back">
<div id="front">
<img src="images/fullinspire33.png" />
</div>
<div id="behindI">
<canvas id="myCanvasI" width="33" height="33">
<script>
var z=document.getElementById("myCanvasI");
var ctx=z.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,33,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,33,33*i);
ctx.stroke();
</script>
</canvas></div>
<div id="behindN">
<canvas id="myCanvasN" width="47" height="33">
<script>
var y=document.getElementById("myCanvasN");
var ctx=y.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*n);
ctx.stroke();
</script>
</canvas> </div>
<div id="behindS">
<canvas id="myCanvasS" width="33" height="33">
<script>
var x=document.getElementById("myCanvasS");
var ctx=x.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,33,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,100,33*s);
ctx.stroke();
</script></canvas></div>
<div id="behindP">
<canvas id="myCanvasP" width="47" height="33">
<script>
var w=document.getElementById("myCanvasP");
var ctx=w.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*p);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindII">
<canvas id="myCanvasII" width="40" height="33">
<script>
var v=document.getElementById("myCanvasII");
var ctx=v.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,40,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,40,33*ii);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindR">
<canvas id="myCanvasR" width="47" height="33">
<script>
var u=document.getElementById("myCanvasR");
var ctx=u.getContext("2d");
ctx.fillStyle="indigo";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*r);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindE">
<canvas id="myCanvasE" width="47" height="33">
<script>
var t=document.getElementById("myCanvasE");
var ctx=t.getContext("2d");
ctx.fillStyle="violet";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*e);
ctx.stroke();
</script>
</canvas>
</div>
</div>
</div>
</div>
</body>
</html>
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-10-28 11:36:32
只需添加另一个div，它将div包装为id黑色，如下所示
<div style="
display: inline-block;
width: 295;
height: 35px;
margin: auto;
">
<div id="back"> you stuff in this div </div>
</div>以防万一您想要将您的div与id黑色保持为position:absolute;
Stack Overflow用户
发布于 2016-10-28 11:35:23
您不能将position: absolute;用于空白0自动，您需要使用位置相对或静态来完成此操作。
Stack Overflow用户
发布于 2016-10-28 11:37:29
向position:relative div中添加一个w3-card。在此之后，position:absolute;上的所有子元素都将得到与该元素相关的位置。
然后，将left:0px; right:0px;附加到#back将完成这一任务。
更改将是：
#back {
position: absolute;
width: 294px;
margin: 0 auto;
z-index: 0;
left: 0px;
right: 0px;
}和
#w3-card {
position: relative;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40303928
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号