css显示倒置柱状图，认识bottom属性

来源：互联网发布：客户经理好用软件编辑：程序博客网时间：2024/06/06 13:12

使用CSS+DIV实现如下倒置的柱状图，主要是使用b标签实现

                          <div class="leftFloat labelHotContainer">      <span class="labelHot"><b class="labelHotValue labelHotValue1"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue2"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue3"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue4"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue5"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue6"> <em>2012</em></b></span>  <span class="labelHot"><b class="labelHotValue labelHotValue7"> <em>2012</em></b></span>                  </div>

#rightContent .labelHotContainer{width:100px;margin-top: 10px;margin-left: 20px;}#rightContent .labelHotContainer .labelHot{display:block;float:left;height:30px;width:7px;margin-right: 2px;}#rightContent .labelHotContainer .labelHotValue{position:relative;border-bottom: 1px solid #A8C082;background: #B9D38F;width: 7px;display: block;}#rightContent .labelHotContainer .labelHotValue1{height:10%;}#rightContent .labelHotContainer .labelHotValue2{height:30%;}#rightContent .labelHotContainer .labelHotValue3{height:40%;}#rightContent .labelHotContainer .labelHotValue4{height:50%;}#rightContent .labelHotContainer .labelHotValue5{height:70%;}#rightContent .labelHotContainer .labelHotValue6{height:80%;}#rightContent .labelHotContainer .labelHotValue7{height:100%;}#rightContent .labelHotContainer em{   position:absolute;   display:none;}

但是如果要是柱状图正着显示呢？，就得使用css中的bottom属性

定义和用法

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。

说明

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。

对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

所以，需要将labelHotValue的css加上position：absolute；bottom:0;

#rightContent .labelHotContainer .labelHotValue{border-bottom: 1px solid #A8C082;background: #B9D38F;width: 7px;display: block;        position:absolute;bottom: 0;}