div+css实现这种柱状图效果要怎么做

Posted 2023-03-09

1）通常div在父亲div中是重上往下一个一个排放的，如何做到重下往上排放，并且第一个要底部对齐（看图）
2）我希望在图中div3永远在div2的头上，(就是说当我用js来加高div2的高度时，div3也要随着提高,不能原地不动，变成两个div重叠在一起）
3)js部分我自己写，我就想知道这个静态网页是怎么切出来的。

做到重下往上排放没办法，要实现则要计算好位置。
为简化柱状图布局计算，需在div2/div3外再套一个div，高度改变需重新计算位置。
好了，一切代码说话：
<script type='text/javascript'>
// 对子div（bar1,bar2,bar3,bar4……）设置新高度
function setBarHeight(obj, nh)
var oh = obj.currentStyle.height; // 旧高度
obj.style.height = nh; // 设置新高度
var p = obj.parentNode; // 上一层div
var v = parseInt(oh.match(/\d+/)[0]) - nh; //　变化量
var ph = p.currentStyle.bottom; // 上级DIV旧位移
p.style.bottom = ph.replace(/\d+/, function($0) return parseInt($0) + v ) ; // 定位上一层div

</script>
<style type='text/css'>
div#container width: 600;height: 400; border: thin 1px grey solid;
div.xbar float:left; margin-left: 30; width:50; position: relative; bottom:-358;
div.xbar div height: 20; overflow: hidden; border: thin 1px grey solid;
div.b1 background-color:yellow;
div.b2 background-color:lime;
</style>
<div id='container' >
<div class="xbar">
<div class="b1" id='bar1'>a</div>
<div class="b2" id='bar2'>b</div>
</div>
<div class="xbar">
<div class="b1" id='bar3'>c</div>
<div class="b2" id='bar4'>d</div>
</div>
</div> 参考技术A 呵呵，代码我就不帖了．给你讲讲我的看法吧．
DOM元素是自上而下的．也就是说DIV2的底部如果　有空间，DIV2增加，自然是向下增加．并不会提高DIV3的．所以，关键就是要DIV2底部没有了空间这样才会达到你要的效果．所以要做一个大的容器并使DIV2　margin-bottom:0px；这样只要增加DIV2的高度，应该就能达到向上增加．
只是我的想法，并没去做过． 参考技术B <div style="width:50px" id="div1">
<div id="div3" style="float:left; background:#FF0; height:20px; width:50px;" >  </div>
<div id="div2" style="float:left;background:#00FF00;height:20px;width:50px;"> </div>
</div>
设置浮动就成了.当然 你的DIV1的 width 要和里面的一样. 显示的话 最外面在弄个DIV就好了本回答被提问者和网友采纳 参考技术C <div style="position:absolute;bottom:0px;">
<div style="height:100px;width:100px;background:#ccc;"></div>
<div style="height:300px;width:100px;background:#efefef;"></div>
</div>