Question

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％高度，以及标签，％指示。

Answer 1

使用以下

更改您的CSS

  .sub-div {
    margin-right: 6%;
    display: inline-block;
    height: 250px;
    border: 1px solid green;
        **vertical-align:top;**
    }

尝试以上代码......

Answer 2

我认为这就是你所需要的 - fiddle。我已经重新安排了你的代码以简化其工作原理，但基本上它使用绝对定位来使条形图坚持到底部。如果有任何不清楚的地方，请告诉我。

现在每个栏都使用HTML：

<div class="bar-container">
    <div class="bar" style="height:50%">
        <span class="percentage">50%</span>
        <span class="label">L1</span>
    </div>
</div>

Answer 3

CSS

您错过了对齐条形在.sub-div css类

中添加此行

vertical-align: top;

DEMO

Css修复 - div中不正确对齐的图表项

3 个答案: