[英]Css fix - chart items in a div improper alignment
代码在这里 - http://jsfiddle.net/Cd2Ek/
HTML -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
如果您在jsfiddle中看到输出,则条形图将位于main-div下方。 我想你可以猜到实际的要求,所有的柱子都应该从底部开始,如果%是50,那么frm bottom,bar应该高达主div的50%高度,以及标签,%指示。
用下面的一个改变你的CSS
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
试试以上代码......
我认为这就是你所需要的 - 小提琴 。 我已经重新安排了你的代码以简化其工作原理,但基本上它使用绝对定位来使条形图坚持到底部。 如果有任何不清楚的地方,请告诉我。
每个栏现在都使用HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.